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

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/

Answer 2

Bootstrap Version 3 hat eine .text-center Klasse.

Fügen Sie einfach diese Klasse hinzu:

text-center

Es wird einfach dieses Styles geladen:

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

Beispiel:

          Bootstrap 4 kommt....

Answer 3

Mit Bootstrap v3 und v4 kann dies einfach erreicht werden, indem .justify-content-center zum .row

hinzugefügt wird

    zentrierte 1 Spalte

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

Answer 4

Dies funktioniert. Wahrscheinlich auf eine hackische Weise, aber es funktioniert gut. Es wurde für Responsive getestet (Y).

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

Answer 5

Mit Bootstrap 4 können Sie einfach justify-content-md-center ausprobieren, wie hier erwähnt hier

              1 von 3

            Inhalt mit variabler Breite

              3 von 3

             1 von 3

                Inhalt mit variabler Breite

              3 von 3