Wie man das Bild vertikal in einem DIV zentriert

vertikal ein Bild in einem Bootstrap Div: Ein umfassender Leitfaden

Dieser Artikel befasst sich mit verschiedenen Aspekten von vertikal zentrierenden Bildern in Bootstrap -Divs, die verschiedene Techniken und ihre Effizienz untersuchen. Flexbox. Bootstrap 4 und 5 unterstützen die Flexbox leicht und machen dies zu einer sauberen und effizienten Lösung. Hier erfahren Sie, wie:

Flexbox auf die übergeordnete DIV anwenden:

Fügen Sie die Klasse

und
1. zu Ihrem Div hinzu. aktiviert das Flexbox -Layout und zentre die Elemente im Flex -Behälter vertikal. Wenn Ihr Bild keine feste Höhe hat (z. B. ist es auf festgelegt), kann es möglicherweise nicht korrekt stehen. Betrachten Sie eine spezifische Höhe oder verwenden Sie die Seitenverhältnis -Techniken (später besprochen). Die Klassen d-flex, align-items-center und d-flex gewährleisten sowohl vertikale als auch horizontale Zentrierung des Bildes in diesem Raum. Denken Sie daran, align-items-center durch den tatsächlichen Pfad zu Ihrem Bild zu ersetzen. Um dies zu verhindern, müssen Sie die Bildgröße steuern. Hier sind mehrere Ansätze:
2. set auto und
:
3. Dies begrenzt die Bildgröße und beibehalten des Seitenverhältnisses. Kombinieren Sie dies mit der obigen Flexbox -Methode: justify-content-center

Verwenden Sie : Diese CSS -Eigenschaft steuert, wie ein Bild zu seinem Container angepasst wird.

skaliert das Bild so in den Container, während das Seitenverhältnis beibehält und möglicherweise ein Buchstabenbox (leerer Speicherplatz) hinzugefügt wird.

<div class="d-flex align-items-center justify-content-center" style="height: 200px;">
  <img src="your-image.jpg" alt="Your Image">
</div>

skaliert das Bild, um den Behälter vollständig abzudecken und möglicherweise Teile des Bildes zu schneiden. Und was ist die effizienteste?

1. Flexbox (empfohlen): Wie oben beschrieben, ist dies sauber, prägnant und weit verbreitet. Flexbox ist für diese spezifische Aufgabe jedoch oft einfacher. Dies ist weniger effizient und erfordert mehr manuelle Berechnung als Flexbox. Es benötigt auch eine spezifische Höhe und Breite für den übergeordneten Container. JavaScript?
2. Ja, die oben beschriebene Flexbox -Methode ist eine reine CSS -Lösung. Es erfordert keinerlei JavaScript. Die Verwendung von zum Überlauf ist auch ein reiner CSS -Ansatz. Daher können Sie die vertikale Zentrierung von Bildern in Bootstrap -Divs effizient und ohne JavaScript zurückgreifen.

Das obige ist der detaillierte Inhalt vonWie man das Bild vertikal in einem DIV zentriert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!