Comment centrer un élément absolument positionné dans un div?

Le positionnement des éléments dans HTML et CSS est crucial pour structurer les éléments d'une page Web. De plus, le CSS "position«La propriété peut être utilisée pour modifier les positions de l'élément. Cette propriété peut être utilisée en conjonction avec des attributs de décalage, y compris les propriétés droite, supérieure, gauche et inférieure, pour modifier la position de l'élément sur la page.

Ce poste examinera la procédure de centrage d'un élément absolument positionné dans un div.

Comment centrer un élément absolument positionné dans un div?

Pour centrer un élément absolument positionné dans une div, nous discuterons des deux méthodes suivantes:

• Méthode 1: Comment centrer l'image par rapport à «div»?

• Méthode 2: Comment centrer l'image par rapport au «corps»?

Méthode 1: Comment centrer l'image par rapport à «div»?

Pour centrer l'image par rapport à la div, définir une position relative au conteneur donne à l'élément absolu une limite. Plus précisément, des éléments qui sont «absolu«Sont limités par le parent relatif le plus proche positionné. Mais si rien de tout cela n'existe, ils seront délimités par la fenêtre.

Étape 1: Ajouter une image dans le fichier html

Suivez les instructions données pour centrer une image par rapport au conteneur créé:

• Tout d'abord, ajoutez une rubrique en utilisant la balise d'en-tête "

  ". Ensuite, utilisez le "style»Attribut entre le

  Tag et ajouter le texte pour la tête.

• Ensuite, faites un «"Et allouer le nom de classe comme"élément position".
• Ajoutez une image en utilisant le ""Tag et insérer le"SRC”Attribut d'image qui fait référence à l'URL de l'image:

Élément de position absolue

On peut observer qu'une image a été ajoutée avec succès dans le conteneur DIV:

Maintenant, passons à la partie CSS pour centrer l'élément absolument positionné dans un div.

Étape 2: Style ".Élément de position »

.Position-Element
hauteur: 350px;
Largeur: 350px;
marge: auto;
Position: relative;
Border: 4px RVB solide (38, 17, 114);

Dans le code mentionné ci-dessus, accédez au «élément positionné"Classe en utilisant le".»Sélecteur et appliquez les propriétés données:

• "hauteur"La propriété définit la hauteur de l'élément d'accès comme« 350px ».
• "largeur«La propriété est utilisée pour allouer une largeur« 350px ».
• "marge»La propriété spécifie l'espace autour de l'élément et à l'extérieur de la bordure définie.
• "position»La propriété spécifie le type de méthode positionné et utilisé pour un élément. Dans l'exemple ci-dessus, la position est définie comme «relatif”Pour positionner l'élément par rapport à sa position normale.
• Alors, "frontière"Est utilisé pour définir la largeur, le style de ligne et la couleur de la bordure autour de l'élément.

Étape 3: Style ".IMG de position d'éléments de position »

Consultez le bloc de code donné:

.position de position iMg
Position: absolue;
Transformer: traduire (-50%, -50%);
Gauche: 50%;
en haut: 50%;

Ici:

• "position«Définir comme« absolu »qui est utilisé pour placer l'élément par rapport à la section corporelle du HTML.
• "transformer«La propriété est utilisée pour modifier l'espace de coordonnées du modèle de formatage visuel avec le«traduire" effet.

• "gauche»Spécifie le réglage horizontal de l'élément.
• "haut”Alloue le réglage vertical de l'élément.

On peut observer que l'élément positionné absolu a été aligné au centre:

Méthode 2: Comment centrer l'image par rapport au «corps»?

Pour centrer l'image par rapport au corps, essayez les instructions données:

• Tout d'abord, créez une rubrique avec le «

  " étiqueter.

• Ensuite, ajoutez un ""Tag et insérer le"identifiant”Attribut à l'intérieur de la balise d'image. Après cela, le «SRC»L'attribut est pour spécifier le chemin d'image:

Élément de position absolue

Style «# Position-Image»

# position-IMG
Position: absolue;
Gauche: 50%;
Transform: Translatex (-50%);

Accédez à l'identifiant "position-IMG"En utilisant le"#"Selecteur et également postuler"position","gauche", et "transformer" propriétés.

Sortir

Nous avons compilé les méthodes pour centrer l'élément d'une div avec une position absolue.

Conclusion

Le CSS "position«La propriété est utilisée pour centrer un élément absolument positionné. Sa valeur est définie comme «absolu«Pour placer l'élément par rapport à son élément parent, qui est actuellement positionné à proximité. De plus, vous pouvez également utiliser diverses propriétés ainsi que la propriété de position, telles que «gauche", et "transformer"Pour centrer l'élément. Ce tutoriel a démontré les procédures pour centrer l'élément d'une div avec la position absolue.