Wie zentriere ich ein Bild in Bootstrap vertikal?

So zentrieren Sie ein Bild vertikal in Bootstrap

Das horizontale Zentrieren eines Bildes in Bootstrap kann auf verschiedene Arten erreicht werden.

Methode 1: Verwendung der Center-Block-Klasse

Twitter Bootstrap v3.0.3 führt zu diesem Zweck die Center-Block-Klasse ein. Es stellt das Element auf display: block ein und zentriert es über den Rand.

So verwenden Sie diese Methode:

1. Fügen Sie die Klasse „center-block“ zum img-Tag hinzu:

<code class="html"><img class="center-block" src="logo.png" /></code>

Methode 2: Verwenden des Rastersystems

Alternativ können Sie das Bootstrap-Rastersystem verwenden, um die Zeile in drei gleiche Blöcke aufzuteilen:

<code class="html"><div class="row">
  <div class="col-4"></div>
  <div class="col-4"><img src="logo.png" /></div>
  <div class="col-4"></div>
</div></code>

Diese Methode zentriert das Bild auch horizontal innerhalb der Zeile.

Um das Bild vertikal zu zentrieren, können Sie zusätzlich CSS verwenden, um das Bild so einzustellen, dass es inline-block angezeigt wird, und es mit einem Margin-Top-Equal versehen auf halbe Bildhöhe:

<code class="css">img {
  display: inline-block;
  margin-top: -(image-height / 2);
}</code>

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Bild in Bootstrap vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!