Comment centrer parfaitement les images dans les divisions parentes à l'aide des propriétés CSS et de l'image ?

Centrer l'image : un guide pour aligner les images dans les divisions parent

Lorsque vous travaillez avec des images en HTML, il est souvent souhaitable de les centrer horizontalement dans leurs divs parents. Pour y parvenir, il faut soigneusement considérer à la fois les propriétés CSS et les attributs d'élément.

Utilisation de CSS

Pour centrer une image dans un div parent, vous pouvez ajouter un texte- aligner : centrer ; déclaration au CSS du div parent. Cela aligne tous les éléments en ligne dans le div, y compris l'image.

<code class="CSS">.box {
    text-align: center;
}</code>

Utilisation de la hauteur de l'image et de la largeur automatique

Assurez-vous que l'image a une hauteur de 100 % et une largeur automatique. Cela garantit que la hauteur de l'image s'étire pour s'adapter au div parent tout en conservant son rapport hauteur/largeur.

<code class="CSS">.box img {
    height: 100%;
    width: auto;
}</code>

Résoudre les espaces verticaux

Dans certains cas, vous remarquerez peut-être un espace vertical sous l’image. Cela est dû aux caractères réservés à la hauteur de ligne associés aux éléments en ligne tels que . Pour supprimer cet espace, ajoutez vertical-align: bottom; au CSS de l'image.

<code class="CSS">.box img {
    vertical-align: bottom;
}</code>

Conclusion

En utilisant la combinaison de l'alignement CSS et du dimensionnement approprié de l'image, vous pouvez centrer efficacement les images dans les divs parents. Cette technique fournit une mise en page cohérente et visuellement attrayante pour les éléments de votre page Web.

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!