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

Wenn Sie dies in Ihrer Reihe platzieren, werden alle Spalten darin zentriert sein:

.row-centered {
    display: flex;
    justify-content: space-between;
}

Answer 2

Vergessen Sie nicht, !important hinzuzufügen. Dann können Sie sicher sein, dass das Element wirklich in der Mitte sein wird:

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

Answer 3

Beachten Sie, dass Sie bei Verwendung von Bootstrap 4 in Ihrer row .align-items-center verwenden können, da Boostrap 4 jetzt das Flex-System verwendet.