Centrage vertical et horizontal d'images de taille inconnue dans des conteneurs connus_CSS/HTML

Sauf indication contraire, le contenu de ce site est créé avec autorisation de partage et est destiné à un usage non commercial. Veuillez respecter le fruit de votre travail.

Dans la mise en page CSS, le centrage vertical des images de taille inconnue a toujours été un casse-tête. Les navigateurs standards n'ont besoin que de définir la hauteur de ligne du conteneur et le vertical-align:middle de l'image, mais cela ne sert à rien. pour IE, j'ai vu une solution pour IE sur un site Web étranger il y a quelques mois. J'ai trouvé que ce n'était pas très idéal et je ne l'ai pas pris au sérieux. Récemment, je vois souvent des amis poser des questions similaires, et j'ai extrait le code et l'ai modifié pour IE.

CSS

.box{
hauteur:140px;
largeur:200px;
bordure: solide 1px #666;
text-align:center;/*Centrage horizontal */
line-height:140px;
font-size:126px;/*IE est centré verticalement ici*/
}
.box[class]{
font-size:12px ;/*Les navigateurs standards nécessitent cette valeur*/
}
img{
vertical-align:middle;/*Les images des navigateurs standards sont centrées verticalement*/
}

Original La taille de la police du code étranger est la même que la hauteur. Après l'avoir essayé, la hauteur du conteneur est un peu supérieure à celle du navigateur standard. J'ai essayé plusieurs fois de soustraire 10 % de la hauteur du conteneur. la taille de la police est presque la même. La raison n'est toujours pas claire.

Le test a réussi sous IE5.5, IE6.0, FF1.5, Opera9.0, mais invalide pour IE5.0 et IE7.0.