Zentrieren einer Spalte mit Twitter Bootstrap

Question

Wie zentriere ich ein Div mit einer Spaltenbreite innerhalb des Containers (12 Spalten) in Twitter Bootstrap 3?

.centered {
  background-color: red;
}

Ich möchte ein div mit der Klasse .centered zentriert im Container haben. Ich kann eine Reihe verwenden, wenn es mehrere divs gibt, aber jetzt möchte ich nur ein div mit der Größe einer Spalte zentriert im Container (12 Spalten).

Ich bin mir auch nicht sicher, ob der obige Ansatz ausreicht, da die Absicht nicht darin besteht, das div um die Hälfte zu verschieben. Ich brauche keine freien Räume außerhalb des div und der Inhalt des div soll proportional schrumpfen. Ich möchte, dass der leere Raum außerhalb des Divs gleichmäßig verteilt wird (schrumpfen, bis die Containerbreite einer Spalte entspricht).

Answer 1

Es gibt zwei Ansätze, um eine Spalte in Bootstrap 3 zu zentrieren:

Ansatz 1 (Offsets):

Der erste Ansatz verwendet Bootstraps eigene Offset-Klassen, daher ist keine Änderung im Markup und kein zusätzliches CSS erforderlich. Der Schlüssel ist, einen Offset festzulegen, der der Hälfte der verbleibenden Größe der Zeile entspricht. Zum Beispiel würde eine Spalte der Größe 2 zentriert, indem ein Offset von 5 hinzugefügt wird, das ist (12-2)/2.

Im Markup würde das so aussehen:

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

---

Ansatz 2 (das alte margin:auto)

Sie können beliebige Spaltengrößen zentrieren, indem Sie die bewährte Technik margin: 0 auto; verwenden. Sie müssen sich nur um das Floating kümmern, das vom Rastersystem von Bootstrap hinzugefügt wird. Ich empfehle das Definieren einer benutzerdefinierten CSS-Klasse wie folgt:

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

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

Hinweis: Mit beiden Techniken könnten Sie das .row-Element überspringen und die Spalte in einem .container zentriert haben, aber Sie würden einen minimalen Unterschied in der tatsächlichen Spaltengröße aufgrund der Polsterung in der Containerklasse bemerken.

---

Update:

Seit v3.0.1 hat Bootstrap eine integrierte Klasse namens center-block, die margin: 0 auto verwendet, aber float:none fehlt, Sie können das in Ihr CSS hinzufügen, um es mit dem Rastersystem funktionieren zu lassen.

Answer 2

Bootstrap 5 (Update 2023)

Bootstrap 5 basiert auch auf Flexbox, daher ist das Zentrieren ähnlich wie bei Bootstrap 4. Auto-Margin kann verwendet werden, um Spalten in die Mitte zu verschieben...

            Ich bin zentriert (margin: auto)

-ODER-

Verwenden Sie die Flexbox-Utility-Klassen (z. B.: justify-content-center), um zu zentrieren...

                Ich bin zentriert

https://codeply.com/p/9mpTQJ3fIn

---

Bootstrap 4 (Update 2020)

Mit Flexbox basiertem Bootstrap 4 haben sich die Zentrierungsmethoden geändert..

• text-center wird immer noch für display:inline Elemente verwendet
• mx-auto ersetzt center-block zum Zentrieren von display:block Elementen
• offset-* oder mx-auto kann verwendet werden, um Grid-Spalten zu zentrieren

mx-auto (auto x-Achsen-Margin) zentriert display:block oder display:flex Elemente, die eine definierte Breite haben, (%, vw, px, usw..). Flexbox wird standardmäßig bei Grid-Spalten verwendet, daher gibt es auch verschiedene Flexbox-Zentrierungsmethoden.

Demo Bootstrap 4 Horizontal Centering

Für die vertikale Zentrierung in BS4 siehe https://stackoverflow.com/a/41464397/171456

---

Bootstrap 3 (Ursprüngliche Antwort)

Die bevorzugte Methode zum Zentrieren von Spalten ist die Verwendung von "Offsets" (z. B.: col-md-offset-3)

Bootstrap 3.x Zentrierungsbeispiele

Für das Zentrieren von Elementen gibt es eine center-block Helper-Klasse.

Sie können auch text-center verwenden, um Text zu zentrieren (und Inline-Elemente).

Responsive Demo: https://codeply.com/p/sRH9hSKup1

ÄNDERUNG - Wie in den Kommentaren erwähnt, funktioniert center-block bei Spalteninhalten und display:block Elementen, funktioniert aber nicht bei der Spalte selbst (col-* divs) weil Bootstrap float verwendet.

---

Answer 3

Jetzt funktioniert Bootstrap 3.1.1 mit .center-block, und diese Hilfsklasse funktioniert mit dem Spaltensystem.

Bootstrap 3 Hilfsklasse Center.

Bitte überprüfen Sie diesen jsfiddle DEMO:

        row center-block

            1 center-block

            2 center-block

    row col-xs-2 col-center-block

Zeilen-Spalte-Zentrum unter Verwendung der Hilfsklasse col-center-block.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

Answer 4

Fügen Sie einfach das Folgende zu Ihrer benutzerdefinierten CSS-Datei hinzu. Die Bearbeitung von Bootstrap-CSS-Dateien direkt wird nicht empfohlen und beeinträchtigt Ihre Fähigkeit, ein CDN zu verwenden.

.center-block {
    float: none !important
}

Warum?

Bootstrap CSS (Version 3.7 und niedriger) verwendet margin: 0 auto;, aber es wird durch die float-Eigenschaft des Größencontainers überschrieben.

PS:

Nachdem Sie diese Klasse hinzugefügt haben, vergessen Sie nicht, die Klassen in der richtigen Reihenfolge festzulegen.

Beispiel

Answer 5

Mein Ansatz, um Spalten zu zentrieren, besteht darin, display: inline-block für Spalten und text-align: center für den übergeordneten Container zu verwenden.

Sie müssen nur die CSS-Klasse 'centered' zur row hinzufügen.

HTML:

        Col 1

        Col 2

        Col 3

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/