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

Dies ist wahrscheinlich nicht die beste Antwort, aber es gibt noch eine weitere kreative Lösung dafür. Wie von koala_dev erwähnt, funktioniert die Spaltenverschiebung nur für gerade Spaltengrößen. Durch das Verschachteln von Reihen können Sie jedoch auch ungerade Spalten zentrieren.

Um bei der ursprünglichen Frage zu bleiben, bei der Sie eine Spalte von 1 in einem Raster von 12 zentrieren möchten.

1. Zentrieren Sie eine Spalte von 2, indem Sie sie um 5 verschieben.
2. Erstellen Sie eine verschachtelte Reihe, um innerhalb Ihrer 2 Spalten neue 12 Spalten zu erhalten.
3. Weil Sie eine Spalte von 1 zentrieren möchten und 1 "die Hälfte" von 2 ist (was wir in Schritt 1 zentriert haben), müssen Sie nun eine Spalte von 6 in Ihrer verschachtelten Reihe zentrieren, was leicht durch Verschieben um 3 erreicht wird.

Zum Beispiel:

          zentrierte Spalte mit einer "ursprünglichen Breite" von 1 Spalte

Siehe diese Fiddle, bitte beachten Sie, dass Sie die Größe des Ausgabefensters erhöhen müssen, um das Ergebnis zu sehen, da sich sonst die Spalten umbrechen.

Answer 2

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

Answer 3

         Column 6
         Column 6
         Column 3
         Column 3
         Column 3

CSS

/* centered columns styles */
 .row-centered {
     text-align:center;
 }
 .col-centered {
     display:inline-block;
     float:none;
     /* reset the text-align */
     text-align:left;
     /* inline-block space fix */
     margin-right:-4px;
     text-align: center;
     background-color: #ccc;
     border: 1px solid #ddd;
 }

Answer 4

Wir können dies durch den Einsatz des Tabellenlayoutmechanismus erreichen:

Der Mechanismus ist:

1. Alle Spalten in ein div einwickeln.
2. Machen Sie dieses div zu einer Tabelle mit einem festen Layout.
3. Machen Sie jede Spalte zu einer Tabellenzelle.
4. Verwenden Sie die Eigenschaft vertical-align, um die Position des Inhalts zu steuern.

Die Beispiel-Demo ist hier

Answer 5

Wie koala_dev in seinem Ansatz 1 verwendet hat, bevorzuge ich die Offset-Methode anstelle von center-block oder Margen, die eine begrenzte Verwendung haben, aber wie er erwähnte:

Jetzt gibt es einen offensichtlichen Nachteil dieser Methode, sie funktioniert nur für gerade Spaltenbreiten, also werden nur .col-X-2, .col-X-4, col-X-6, col-X-8 und col-X-10 unterstützt.

Dies kann gelöst werden, indem man für ungerade Spalten den folgenden Ansatz verwendet.

        // Ihr Inhalt hier