Comment positionner une image centrée verticalement et horizontalement dans une division parent ?

Centrage des éléments d'image dans les divisions parents

Lorsque vous cherchez à positionner une image au centre de sa division parent, le résultat souhaité est que le image pour qu'elle reste centrée verticalement dans le parent, tout en conservant sa hauteur inhérente.

Solution :

Pour obtenir cet effet, modifiez la déclaration CSS du parent .box div, plutôt que l'enfant .box img div, en ajoutant text-align: center;. Cet amendement garantit que tous les éléments en ligne au sein du div parent sont alignés de manière centrale.

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

Par conséquent, le CSS mis à jour garantit que l'élément image sera toujours positionné au centre de son div parent, en conservant sa hauteur réelle. .

Résoudre le problème de l'espace vertical :

Après un examen plus approfondi, il a été découvert qu'un espace de 5 px était apparu sous l'image centrée. Cet écart est attribuable à la réservation de hauteur de ligne pour les éléments en ligne tels que . Pour éliminer cet écart, alignez verticalement : bas ; doit être ajouté au CSS de l'image.

.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* <-- fix the vertical gap */
}

En suivant ces étapes, vous pouvez centrer efficacement les images dans les divs parents, en conservant leur hauteur prévue tout en éliminant tout espace vertical involontaire.

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!