Comment centrer une image dans une division parent ?

Centrer une image dans une division parent

Le maintien d'une image alignée de manière centrale dans une division parent peut améliorer l'esthétique du site Web et l'expérience utilisateur. Cet article explique comment réaliser cet alignement efficacement.

Énoncé du problème :

Alignez une image dans un div parent afin que son centre reste au centre du div. , garantissant que l'image s'étend sur toute la hauteur du div sans étirer sa largeur.

Solution :

Au lieu d'appliquer le text-align: center; Déclaration CSS à l'élément image, ajoutez-la à l'élément .box parent.

.box {

height: 100%;
width: 450px;
border: 2px solid red;
background: green;
overflow: hidden;
text-align: center;  // align center all inline elements

}

Cette approche garantit que tous les éléments en ligne dans le div .box sont centrés, y compris l'image.

Considérations supplémentaires :

Si un espace de 5 px apparaît sous l'image, il peut résulter de la hauteur de ligne par défaut associée aux éléments en ligne. Pour éliminer cet écart, appliquez vertical-align: bottom; à l'élément image :

.box img {

height: 100%;
width: auto;
vertical-align: bottom; // fix the vertical gap

}

En mettant en œuvre ces modifications, vous pouvez efficacement centrer votre image dans l'élément div parent et assurez-vous de son apparence souhaitée.

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!