Vertikale und horizontale Zentrierung von Bildern unbekannter Größe in bekannten Containern_CSS/HTML

Soweit nicht anders angegeben, werden die Inhalte dieser Website mit Freigabegenehmigung erstellt und sind für die nichtkommerzielle Nutzung bestimmt. Bitte respektieren Sie die Früchte Ihrer Arbeit.

Im CSS-Layout war die vertikale Zentrierung von Bildern unbekannter Größe immer ein Problem. Standardbrowser müssen nur die Zeilenhöhe des Containers und die vertikale Ausrichtung des Bildes festlegen, aber es ist nutzlos für IE. Ich habe vor ein paar Monaten auf einer ausländischen Website eine Lösung für IE gesehen, die ich nicht sehr ernst genommen habe. In letzter Zeit sehe ich oft Freunde, die ähnliche Fragen stellen, und ich habe den Code ausgegraben und ihn für den IE geändert.

CSS

.box{
height:140px;
width:200px;
border: solid 1px #666;
text-align:center;/*Horizontale Zentrierung */
line-height:140px;
Schriftgröße:126px;/*IE ist hier vertikal zentriert*/
}
.box[class]{
Schriftgröße:12px ;/*Standardbrowser erfordern diesen Wert*/
}
img{
Vertical-align:middle;/*Standardbrowserbilder sind vertikal zentriert*/
}

Original The Die Schriftgröße des Fremdcodes entspricht der Höhe. Nach dem Ausprobieren ist die Höhe des Containers etwas höher als die des Standardbrowsers. Ich habe mehrmals versucht, 10 % der Höhe des Containers abzuziehen Schriftgröße. Auf diese Weise sieht es fast gleich aus. Der Grund ist noch unklar.

Der Test war unter IE5.5, IE6.0, FF1.5, Opera9.0 erfolgreich, aber ungültig für IE5.0 und IE7.0.