Comment centrer une image dans une division parent tout en préservant la hauteur et les proportions ?

Centrer l'élément d'image dans la division parent

Le centrage d'une image dans sa div parent nécessite des techniques CSS spécifiques. Voici comment y parvenir :

Problème :

Comment aligner une image au milieu de son div parent tout en préservant sa hauteur (100%) sans étirer sa largeur ?

Exemple :

Considérez le HTML et le CSS fournis dans la question :

<code class="html"><div class="box">
  <img src='featured.jpg' />
</div></code>

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

Solution :

Pour centrer l'image, ajoutez le text-align: center; Déclaration CSS au div parent au lieu de l'élément image enfant :

<code class="css">.box {
  /* ... */
  text-align: center;  /* Align center all inline elements */
}</code>

Cela centre tous les éléments en ligne dans le div, y compris l'image.

Amélioration supplémentaire :

Il peut y avoir un espace sous l'image en raison de la hauteur de ligne réservée aux éléments en ligne. Pour supprimer cet espace, ajoutez vertical-align: bottom; à l'image CSS :

<code class="css">.box img {
  /* ... */
  vertical-align: bottom;  /* Fix the vertical gap */
}</code>

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!