Comment centrer une image horizontalement et verticalement dans une division ?

Centrage au sein d'une division : réaliser l'alignement visuel

Dans le domaine du développement Web, l'alignement des éléments est crucial pour créer des conceptions visuellement attrayantes et fonctionnelles. . Lorsqu'il s'agit d'images au sein d'un div, s'assurer qu'elles sont centrées à la fois horizontalement et verticalement devient essentiel.

Considérez l'extrait HTML suivant :

<div>

Par défaut, l'image sera positionnée à le coin supérieur gauche du div. Pour obtenir un centrage parfait, une combinaison de propriétés CSS est requise :

Centrage horizontal :
Pour centrer l'image horizontalement, la règle CSS suivante est utilisée :

#over img {
  margin-left: auto;
  margin-right: auto;
}

Ce code demande au navigateur d'ajuster automatiquement les marges gauche et droite de l'image afin qu'elle soit également espacée dans son conteneur.

Centrage vertical :
Pour le centrage vertical, la propriété d'affichage entre en jeu :

#over img {
  ...
  display: block;
}

Réglage de l'affichage : le bloc garantit que l'image se comporte comme un élément de niveau bloc, occupant toute la largeur disponible dans le div.

Ces règles CSS combinées centrent efficacement l'image à la fois horizontalement et verticalement, résultant en une image parfaitement alignée au sein du div.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!