Ausführliche Erläuterung eines Beispiels für die vertikale Zentrierung von Bildern unbekannter Größe mithilfe von reinem CSS

1. Taobaos Methode

Im vorherigen „Taobao UED Recruitment“ gab es eine solche Frage:

„Verwenden Sie reines CSS, um Bilder unbekannter Größe (aber der Höhe) zu implementieren und Breite Beide sind kleiner als 200 Pixel) horizontal und vertikal zentriert in einem 200 Pixel großen quadratischen Container "

Natürlich ist die Frage nicht willkürlich, sondern hat ihre eigenen praktischen Gründe. Die vertikale Zentrierung ist ein Problem, das am häufigsten auftritt Taobao-Arbeit, sehr repräsentativ.

Die Schwierigkeit der Frage liegt in zwei Punkten:

Vertikal zentriert;
Das Bild ist ein Ersatzelement und weist einige Besonderheiten auf.
Was die Lösung angeht, hier ist ein Kompromiss einer relativ strukturell sauberen, einfachen CSS-Lösung:

.box {

display: table-cell;
Vertical -align: middle;

text-align:center;

*display: block;
*font-size: 175px;
*font- family:Arial ;

width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {

Vertical- align:middle ;
}

2. Hintergrundmethode

Der Hintergrund Methode ist einfach, aber nicht für den dynamischen Import geeignet

3. Hintergrundmethode

.qq {
width:500px;
display:table-cell;
height:400px;
text-align:center;
Vertical-align:middle;
border: 1px solid #000
}
i {
display:inline-block;
height:100%;
Vertical-align:middle
}
.qq img {
Vertical-align:middle;
}

Diese Art. Die Methode ist ebenfalls sehr einfach, aber Sie müssen ein zusätzliches Tag von hinzufügen.

Wenn die Seite ein oder zwei zentrierte Bilder benötigt, wird diese Methode empfohlen, aber Wenn es viele Bilder von Produkten gibt, fügen Sie das Tag hinzu. Die Menge ist relativ groß

Andere Lösungen, interessierte Freunde können klicken:

div {
height: 400px;
Line-height: 400px;
overflow: versteckt;
}

Diese Methode ist auch nur auf eine einzelne Textzeile oder Bild + Text anwendbar , wird normalerweise für Links oder Titel mit kleinen Symbolen davor verwendet.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung eines Beispiels für die vertikale Zentrierung von Bildern unbekannter Größe mithilfe von reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!