Comment centrer parfaitement une image dans une division en CSS

Centrer un élément d'image

Dans le développement Web, l'alignement précis des éléments peut améliorer considérablement l'apparence visuelle et l'expérience utilisateur. Un défi courant consiste à centrer une image dans sa division parent. Cet article explore les techniques CSS qui permettent un centrage précis de l'image.

Le but est de positionner l'image de telle sorte que le centre de l'image s'aligne parfaitement avec le centre du div parent. De plus, nous visons à conserver toute la hauteur de l'image.

Solution :

Pour aligner correctement l'image, nous modifions le CSS du div parent au lieu de modifier le CSS de l’image enfant. En déclarant text-align: center; pour le div parent, tous ses éléments en ligne, y compris l'image, seront centrés. Le CSS mis à jour suivant accomplit cela :

<code class="css">.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden;
    text-align: center;  /* Center all inline elements */
}</code>

Cette méthode centre efficacement l'image à la fois horizontalement et verticalement.

Considérations supplémentaires :

Dans certains cas, vous remarquerez peut-être un léger écart sous l'image. Cet écart provient de la hauteur de ligne par défaut des éléments en ligne, en particulier dans les anciens navigateurs. Pour résoudre ce problème, la propriété CSS suivante peut être appliquée à l'image :

<code class="css">.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* Eliminate the vertical gap */
}</code>

En définissant vertical-align: bottom;, l'image sera positionnée verticalement au bas de l'espace disponible, résolvant ainsi l'espace. problème.

En conclusion, en appliquant text-align: center; au div parent et vertical-align: bottom; à l'élément image fournit une solution élégante et efficace pour centrer une image dans un div tout en conservant toute sa hauteur.

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!