Wie zentriert man ein Bild perfekt auf einer Seite mit der .center-block-Klasse von Bootstrap?

Mit Bootstrap ein Bild perfekt in der Mitte einer Seite ausrichten

Bei der Arbeit mit Twitter Bootstrap ist es möglicherweise nicht immer einfach, ein Bild horizontal zu zentrieren. In diesem Artikel wird eine Lösung vorgestellt, die die Bootstrap-Klasse .center-block verwendet, um Bilder mühelos mittig auf der Seite auszurichten.

Grundlegendes zur .center-block-Klasse

Die .center-block-Klasse in Twitter Bootstrap v3.0.3 wurde speziell für die Ausrichtung von Blockelementen in der Mitte einer Seite entwickelt. Es setzt die Anzeigeeigenschaft auf „Blockieren“ und stellt die Ränder (Rand links und Rand rechts) auf „Auto“ ein, um sicherzustellen, dass das Element sowohl horizontal als auch vertikal zentriert ist.

Ausrichten eines Bildes mit .center-block

Um ein Bild mit .center-block zu zentrieren, fügen Sie die Klasse einfach zum img-Tag innerhalb einer Zeile hinzu. Zum Beispiel:

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

Das .center-block-Klassen-Stylesheet definiert Folgendes:

<code class="css">.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }</code>

Beispiel

Für eine Live-Demonstration können Sie Folgendes besuchen Beispielseite:

[Beispielseite](URL)

Durch die Verwendung der .center-block-Klasse können Sie jedes Bild mühelos mittig auf der Seite ausrichten und so ein optisch ansprechendes und ausgewogenes Layout gewährleisten .

Das obige ist der detaillierte Inhalt vonWie zentriert man ein Bild perfekt auf einer Seite mit der .center-block-Klasse von Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!