Wie zentriere ich ein Bild in Bootstrap mit .center-block perfekt?

Mit Bootstrap ein Bild perfekt zentrieren

Bei Verwendung des Bootstrap-Frameworks kann das horizontale Zentrieren eines Bildes eine kleine Herausforderung sein. Es gibt jedoch eine einfache Lösung mit der integrierten Klasse .center-block.

CSS-Klasse: .center-block

Die .center-block-Klasse, eingeführt in Twitter Bootstrap v3.0.3, zentriert Inhaltsblöcke horizontal mithilfe von Rändern. Es kann als Mixin oder Klasse verwendet werden.

Verwendung

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

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

CSS

Die .center-block-Klasse verfügt über die folgenden CSS-Eigenschaften:

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

Diese Eigenschaften legen das Bild fest, als das angezeigt werden soll ein Blockelement und zentrieren Sie es auf der Seite, indem Sie auf beiden Seiten gleiche Ränder anwenden.

Beispiel

Sie können ein Live-Beispiel eines mit .center zentrierten Bildes anzeigen. blockieren unter: [Beispiel-URL hier]

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