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

Verwenden Sie mx-auto in Ihrer div-Klasse mit Bootstrap 4.

      Dein Inhalt hier

Answer 2

Bootstrap 4 Lösung:

      Spalte in der Mitte, variable Breite

Answer 3

Um mehr als eine Spalte in einer Bootstrap-Zeile zu zentrieren - und die Anzahl der Spalten ungerade ist, fügen Sie einfach diese css-Klasse zu allen Spalten in dieser Zeile hinzu:

.many-cols-centered {  // Zum horizontalen Zentrieren ungerader Bootsrapp-Spalten, z.B. col-lg-9, col-md-3, funktioniert gut in lg
  display:inline-block;
  float:none;
}

Also haben Sie in Ihrem HTML etwas wie:

        Du siehst
        Ich liebe es zu programmieren.

        Du siehst
        Ich liebe es zu programmieren.

        Du siehst
        Ich liebe es zu programmieren.

Answer 4

Versuchen Sie das

Sie können auch andere col verwenden, wie z.B. col-md-2, usw.

Answer 5

Versuchen Sie diesen Code.

Hier habe ich col-lg-1 verwendet, und der Offset sollte 10 betragen, um das Div auf großen Geräten richtig zu zentrieren. Wenn Sie möchten, dass es auf mittelgroßen bis großen Geräten zentriert wird, ändern Sie einfach lg in md usw.