Style CSS pour centrer verticalement les images dans des divs de largeur et de hauteur variables

Cet article présente principalement le style CSS pour le centrage vertical des images dans des divs de largeur et de hauteur variables. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Ceci. l'article présente principalement Cet article présente comment centrer verticalement l'image en p lorsque la largeur et la hauteur sont variables, et comment écrire le style css ? L'exemple de code est le suivant

Le moyen le plus simple est de définir l'attribut CSS de l'élément externe :

p{ 
display: table-cell; 
}

Mais IE6/7 ne prend pas en charge ce style CSS. Pour être compatible avec. eux, vous pouvez utiliser la méthode suivante.

La structure du HTML est la suivante :

<p><span></span><img src="test.png" alt=""></p>

Le code CSS est le suivant :

p{ 
width: 100px; 
height: 100px; 
border: 1px solid #ccc; 
} 
span{ 
line-height: 100%; 
vertical-align: middle; 
display: inline-block; 
height: 100%; 
} 
img{ 
width: 100%; 
vertical-align: middle; 
}

En définissant les attributs ci-dessus, l'effet de l'image ci-dessous peut être réalisé. L'image est centrée verticalement en p .

Le principe de cette méthode est d'insérer une balise span vide devant la balise img et de l'utiliser pour étendre la hauteur de la ligne entre p jusqu'à 100%.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment définir le centrage vertical pour les images de hauteur inconnue

À propos du centrage réactif des images de bannière CSS Méthode

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!