Ausführliche Erklärung, wie man Bilder in CSS vertikal zentriert

[Einleitung] Bei der letzten Rekrutierung von Taobao UED gab es eine solche Frage: „Verwenden Sie reines CSS, um die horizontale und vertikale Zentrierung eines Bildes unbekannter Größe (aber Höhe und Breite sind weniger als 200 Pixel) in einem 200 Pixel großen Quadrat zu realisieren.“ Container.“ Natürlich ist die Frage nicht zufällig, sondern hat ihre eigenen praktischen Gründe. Vertikale Zentrierung ist das Wichtigste in der Taobao-Arbeit.

Bei der früheren Taobao UED-Rekrutierung gab es eine solche Frage:

„Verwenden Sie reines CSS, um unbekannte Größen zu erreichen (aber die Höhe und Breite betragen weniger als 200 Pixel) werden horizontal und vertikal in einem 200 Pixel großen quadratischen Container zentriert.“ Die Frage ist nicht zufällig, sondern hat ihre eigenen praktischen Gründe. Die vertikale Zentrierung ist das wichtigste Problem in der Taobao-Arbeit.

Die Schwierigkeit der Frage liegt in zwei Punkten:

1. Vertikal zentriert;

2. Das Bild ist ein Ersatzelement mit einigen besonderen Eigenschaften.

Was die Lösung betrifft, finden Sie hier einen Kompromiss zwischen einer relativ sauberen, CSS-einfachen Problemumgehung:

.box {

/ *Vertikale Zentrierungsmethode, die von anderen Mainstream-Browsern als IE erkannt wird*/

display: table-cell;

Vertical-align:middle;

/*Horizontale Zentrierung festlegen*/

text-align:center;

/* Hack für IE */

*display: block ;

*font-size: 175px;/*Etwa 0,873 der Höhe, 200*0,873 ist etwa 175*/

*font-family:Arial;/ *Verhindern Sie Hack-Fehlerprobleme, die durch Nicht-UTF-8 verursacht werden, wie z. B. GBK-Kodierung*/

width:200px;

height:200px;

border : 1px solid #eee;

}

.box img {

/*Stellt das Bild so ein, dass es vertikal zentriert ist*/

vertikal ausrichten: Mitte;

}

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man Bilder in CSS vertikal zentriert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!