Wie man ein Bild mit Bootstrap mittig ausrichtet

I'm mit dem Bootstrap-Framework und versuchen, ein Bild horizontal zentriert ohne Erfolg zu bekommen.

I've versucht verschiedene Techniken wie die Aufteilung der 12 Grid-System in 3 gleiche Blöcke z.B.

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Was ist die einfachste Methode, um ein Bild relativ zur Seite zu zentrieren?

GEOCHET
Bearbeitete Frage 5. Mai 2014 в 10:11
Programmierung
css twitter-bootstrap
4. Juni 2012 в 10:40
8 Aufrufe

Twitter Bootstrap hat eine Klasse, die zentriert: .pagination-centered

Bei mir hat es funktioniert:

<div class="row-fluid">
   <div class="span12 pagination-centered">![header](header.png)</div>
</div>

Das css für die Klasse ist:

.pagination-centered {
  text-align: center;
}
Kommentare (2)

Unter der Voraussetzung, dass sich neben dem Bild nichts anderes befindet, ist es am besten, text-align: center im img parent zu verwenden:

.row .span4 {
    text-align: center;
}

Bearbeiten

Wie in den anderen Antworten erwähnt, können Sie die Bootstrap-CSS-Klasse "text-center" zum übergeordneten Element hinzufügen. Dies bewirkt genau dasselbe und ist sowohl in v2.3.3 als auch in v3 verfügbar

My Head Hurts
Bearbeitete Antwort 2. Oktober 2013 в 8:18
Kommentare (4)

Sie können das CSS der vorherigen Lösung wie folgt ändern:

.container, .row { text-align: center; }

Dies sollte alle Elemente im übergeordneten "div" ebenfalls zentrieren.

Kommentare (0)