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

Sie können text-center für die Zeile verwenden und sicherstellen, dass die internen Divs display:inline-block haben (ohne float).

Als:

        Ein roter Block
        Ein weißer Block
        Ein gelber Block

Und CSS:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

Das Fiddle: http://jsfiddle.net/DTcHh/3177/

Answer 2

Stellen Sie einfach Ihre eine Spalte ein, die den Inhalt anzeigt, auf col-xs-12 (mobile-first ;-) und konfigurieren Sie den Container nur zur Steuerung, wie breit Sie Ihren zentrierten Inhalt haben möchten, also:

.container {
  Hintergrundfarbe: blau;
}
.centered {
    background-color: rot;
}

Für eine Demo siehe http://codepen.io/Kebten/pen/gpRNMe :-)

Answer 3

Ein weiterer Ansatz zum Offsetten besteht darin, zwei leere Spalten zu haben, zum Beispiel:

Zentrierter Inhalt

Answer 4

Um die Spalte zu zentrieren, müssen wir den folgenden Code verwenden. Spalten sind Elemente mit Float-Eigenschaften neben dem automatischen Abstand. Wir werden es auch auf 'float: none' setzen.

Um die obige col-lg-1 mit der Klasse 'centered' zu zentrieren, schreiben wir:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Um den Inhalt innerhalb des divs zu zentrieren, verwenden Sie text-align:center,

.centered {
    text-align: center;
}

Wenn Sie es nur auf dem Desktop und größeren Bildschirmen zentrieren möchten, nicht jedoch auf dem Handy, verwenden Sie die folgende Media Query.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

Und um das div nur in der mobilen Version zu zentrieren, verwenden Sie den folgenden Code.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

Answer 5

Das ist nicht mein Code, aber er funktioniert perfekt (getestet auf Bootstrap 3) und ich muss nicht mit col-offset herumspielen.

Demo:

/* Zentrierte Spaltenstile */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  Hintergrundfarbe: #ccc;
  Rand: 1px solid #ddd;
}

    Spalte 6
    Spalte 6
    Spalte 3
    Spalte 3
    Spalte 3