Zentrieren einer Spalte mit Twitter Bootstrap 3

Wie zentriere ich ein einspaltiges div innerhalb des Containers (12 Spalten) in Twitter Bootstrap 3?

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

Ich möchte, dass ein div mit der Klasse .centered im Container zentriert wird. Ich kann eine Zeile verwenden, wenn es mehrere div gibt, aber im Moment möchte ich nur ein div mit der Größe einer Spalte innerhalb des Containers zentriert (12 Spalten).

Ich bin mir auch nicht sicher, ob der obige Ansatz gut genug ist, da die Absicht nicht darin besteht, das div um die Hälfte zu versetzen. Ich brauche keine freien Flächen außerhalb des "Div" und der Inhalt des "Div" schrumpft proportional. Ich möchte den Leerraum außerhalb des Div gleichmäßig verteilen (schrumpfen, bis die Breite des Containers gleich einer Spalte ist).

daaawx
Bearbeitete Frage 17. März 2019 в 7:03
Programmierung
css twitter-bootstrap-3 twitter-bootstrap centering
9. August 2013 в 6:24
18 Aufrufe
Lösung

Es gibt zwei Ansätze zur Zentrierung einer Spalte <div> in Bootstrap 3:

Ansatz 1 (Offsets):

Der erste Ansatz verwendet die Bootstrap-eigenen Offset-Klassen, so dass keine Änderungen im Markup und kein zusätzliches CSS erforderlich sind. Der Schlüssel ist, einen Offset gleich der Hälfte der verbleibenden Größe der Zeile zu setzen. So würde zum Beispiel eine Spalte der Größe 2 durch Hinzufügen eines Offsets von 5 zentriert werden, das ist (12-2)/2.

Im Markup würde dies wie folgt aussehen:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Es gibt einen offensichtlichen Nachteil dieser Methode. Es funktioniert nur für gerade Spaltengrößen, also werden nur .col-X-2, .col-X-4, col-X-6, col-X-8 und col-X-10 unterstützt.

Ansatz 2 (das alte margin:auto)

Sie können jede Spaltengröße zentrieren, indem Sie die bewährte Technik margin: 0 auto; verwenden. Sie müssen sich nur um das Floating kümmern, das durch das Bootstrap-Grid-System hinzugefügt wird. Ich empfehle, eine eigene CSS-Klasse wie die folgende zu definieren:

.col-centered{
    float: none;
    margin: 0 auto;
}

Jetzt können Sie es jeder Spaltengröße bei jeder Bildschirmgröße hinzufügen, und es wird nahtlos mit dem responsiven Layout von Bootstrap funktionieren:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Hinweis: Bei beiden Techniken könnte man das Element "row" weglassen und die Spalte innerhalb eines "Containers" zentrieren, aber man würde einen minimalen Unterschied in der tatsächlichen Spaltengröße bemerken, wegen der Polsterung in der Container-Klasse.

Update:

Seit v3.0.1 Bootstrap hat eine eingebaute Klasse namens center-block, die margin: 0 auto verwendet, aber float:none fehlt, können Sie das zu Ihrem CSS hinzufügen, damit es mit dem Grid-System funktioniert.

Peter Mortensen
Bearbeitete Antwort 4. März 2019 в 3:00
Kommentare (20)

Bootstrap 3 hat jetzt eine eingebaute Klasse für diesen .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Wenn Sie noch 2.X verwenden, fügen Sie dies einfach zu Ihrem CSS hinzu.

Schmalzy
Bearbeitete Antwort 24. März 2014 в 8:24
Kommentare (3)

Das funktioniert. Ein hackish Weg wahrscheinlich, aber es funktioniert gut. Es wurde für responsive (Y) getestet.

.centered {
    background-color: teal;
    text-align: center;
}

Peter Mortensen
Bearbeitete Antwort 30. Juni 2016 в 4:01
Kommentare (5)