CSS-Stil zum vertikalen Zentrieren von Bildern innerhalb eines Divs mit variabler Breite und Höhe

Dieser Artikel stellt hauptsächlich den CSS-Stil für die vertikale Zentrierung von Bildern innerhalb von Divs mit variabler Breite und Höhe vor. Jetzt kann ich ihn mit Ihnen teilen.

Dies In diesem Artikel wird hauptsächlich vorgestellt, wie man das Bild in p vertikal zentriert, wenn Breite und Höhe variabel sind, und wie man den CSS-Stil schreibt. Der Beispielcode lautet wie folgt:

Der einfachste Weg besteht darin, das CSS-Attribut des äußeren Elements festzulegen:

p{ 
display: table-cell; 
}

Aus Gründen der Kompatibilität unterstützt IE6/7 diesen CSS-Stil jedoch nicht Mit ihnen können Sie die folgende Methode verwenden. Die Struktur von

HTML ist wie folgt:

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

Der CSS-Code lautet wie folgt:

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; 
}

Durch Festlegen der oben genannten Attribute können Sie den Effekt des Bildes unten erzielen. Das Bild ist vertikal in S. zentriert.

Das Prinzip dieser Methode besteht darin, vor dem img-Tag ein leeres Span-Tag einzufügen und damit die Zeilenhöhe innerhalb von p auf 100 % zu erweitern.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So legen Sie die vertikale Zentrierung für Bilder unbekannter Höhe fest

Informationen zur responsiven Zentrierung von CSS-Bannerbildern Methode

Das obige ist der detaillierte Inhalt vonCSS-Stil zum vertikalen Zentrieren von Bildern innerhalb eines Divs mit variabler Breite und Höhe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!