Zentriere eine Spalte mit Twitter Bootstrap

Wie zentriere ich ein div von einer Spaltengröße innerhalb des Containers (12 Spalten) in Twitter Bootstrap 3.

Bitte sehen Sie sich die Startergeige an.

 

Also, ich möchte ein div , mit einer class centered in den Container centered sein. Ich kann eine Zeile verwenden, wenn es mehrere divs gibt, aber für den Moment möchte ich nur ein div mit der Größe einer Spalte im Container zentriert (12 Spalten).

Ich bin mir auch nicht sicher, ob der obige Ansatz gut genug ist, da die Absicht nicht darin besteht, das div um die Hälfte zu versetzen. Ich brauche keine freien Leerzeichen außerhalb des div und die Inhalte des div schrumpfen proportional. Ich möchte Leerzeichen außerhalb des div gleichmäßig verteilen (schrumpfen bis die Containerbreite == eine Spalte).

   

    Es gibt zwei Möglichkeiten, eine Spalte

    in Bootstrap 3 zu zentrieren:

    Ansatz 1 (Offsets):

    Der erste Ansatz verwendet Bootstrap-eigene Offset-classn, so dass keine Änderung in Markup und kein zusätzliches CSS erforderlich ist. Der Schlüssel besteht darin , einen Versatz festzulegen, der gleich der Hälfte der verbleibenden Größe der Zeile ist . So würde zum Beispiel eine Spalte der Größe 2 zentriert werden, indem ein Offset von 5 hinzugefügt wird, also (12-2)/2 .

    Im Markup würde das so aussehen:

     

    Nun, es gibt einen offensichtlichen Nachteil für diese Methode, es funktioniert nur für gerade Spaltengrößen , also nur .col-X-2 , .col-X-4 , col-X-6 , col-X-8 und col-X-10 werden unterstützt.


    Ansatz 2 (der alte Rand: auto)

    Sie können jede Spaltengröße mit dem bewährten margin: 0 auto; Technik, müssen Sie nur auf das Floating achten, das vom Bootstrap-Grid-System hinzugefügt wird. Ich empfehle, eine benutzerdefinierte CSS-class wie folgt zu definieren:

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

    Jetzt können Sie es zu jeder Spaltengröße bei jeder Bildschirmgröße hinzufügen und es wird nahtlos mit dem responsiven Layout von Bootstrap funktionieren:

     

    Hinweis: Mit beiden Techniken können Sie das .row Element überspringen und die Spalte in einem .container zentriert .container aber Sie würden aufgrund der Auffüllung in der Containerklasse einen minimalen Unterschied in der tatsächlichen Spaltengröße feststellen.


    Aktualisieren:

    Seit v3.0.1 hat Bootstrap eine eingebaute class namens center-block , die margin: 0 auto aber float:none fehlt. Sie können dies Ihrem CSS hinzufügen, damit es mit dem Grid-System funktioniert.

    Das bevorzugte Verfahren zum Zentrieren von Spalten ist das Verwenden von “Offsets” (dh: col-md-offset-3 )

    Bootstrap 3.x Zentrierungsbeispiele

    Für Zentrierungselemente gibt es eine center-block Hilfsklasse .

    Sie können Textcenter auch zum Zentrieren von Text (und Inline-Elementen) verwenden.

    Demo : http://bootply.com/91632

    BEARBEITEN – Wie in den Kommentaren erwähnt, arbeitet center-block an Spalteninhalten und display:block Elementen, arbeitet aber nicht an der Spalte selbst ( col-* divs), da Bootstrap float .


    Aktualisierung 2018

    Jetzt mit Bootstrap 4 haben sich die Zentrierungsmethoden geändert.

    • text-center wird immer noch für die display:inline Elemente
    • mx-auto ersetzt center-block zu Center- display:block
    • offset-* oder mx-auto kann verwendet werden, um offset-*

    mx-auto (automatische X-Achsen-Ränder) vw display:block oder display:flex Elemente, die eine definierte Breite haben , ( % , vw , px , etc ..). Flexbox wird standardmäßig in Rasterspalten verwendet, daher gibt es auch verschiedene Flexbox-Zentrierungsmethoden.

    Demo Bootstrap 4 Horizontale Zentrierung

    Für die vertikale Zentrierung in BS4 siehe https://Stackoverflow.com/a/41464397/171456

    Jetzt arbeitet Bootstrap 3.1.1 mit .center-block und diese .center-block arbeitet mit dem Spaltensystem zusammen.

    Bootstrap 3 Helper Class Center .

    Bitte überprüfen Sie diese jsfiddle DEMO :

     
    row center-block
    1 center-block
    2 center-block
    row col-xs-2 col-center-block

    Helfer Klassenzentrum

    Zeilenspaltenmitte mit der col-center-block Hilfsklasse.

     .col-center-block { float: none; display: block; margin: 0 auto; /* margin-left: auto; margin-right: auto; */ } 

    Fügen Sie das einfach zu Ihrer benutzerdefinierten CSS-Datei hinzu, das direkte Bearbeiten von Bootstrap-CSS-Dateien wird nicht empfohlen und Ihre Fähigkeit, ein cdn zu verwenden, wird aufgehoben.

     .center-block { float: none !important } 

    Warum?

    Bootstrap CSS (Ver 3.7 und niedriger) verwendet: margin: 0 auto; , aber es wird von der Float-Eigenschaft des Größencontainers überschrieben.

    PS : Nachdem Sie diese class hinzugefügt haben, vergessen Sie nicht, die classn in der richtigen Reihenfolge zu setzen.

     
    Example

    Bootstrap 3 hat jetzt eine eingebaute class für diesen .center-block

     .center-block { display: block; margin-left: auto; margin-right: auto; } 

    Wenn Sie immer noch 2.X verwenden, fügen Sie dieses einfach zu Ihrem CSS hinzu.

    Meine Herangehensweise an die mittleren Spalten ist die Verwendung von display: inline-block für columns und text-align: center für den Container-Parent.

    Sie müssen nur die CSS-class ‘zentriert’ 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/

    Bootstrap Version 3 hat eine .text-Center-class.

    Fügen Sie einfach diese class hinzu:

     text-center 

    Es wird einfach diesen Stil laden:

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

    Beispiel:

     
    Bootstrap 4 is coming....

    Das funktioniert. Ein hackischer Weg wahrscheinlich, aber es funktioniert gut. Es wurde auf reaktionsfähig (Y) getestet.

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

    Desktop

    Reagierend

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

    wie:

     
    A red block
    A white block
    A yellow 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 } 

    Die Geige: http://jsfiddle.net/DTcHh/3177/

    Setzen Sie einfach Ihre eine Spalte, die den Inhalt auf col-xs-12 anzeigt (Mobile-first 😉 und konfigurieren Sie den Container nur, um zu steuern, wie groß Ihr zentrierter Inhalt sein soll, also:

     .container { background-color: blue; } .centered { background-color: red; } 
      

    Um die Spalte zu zentrieren, müssen Sie den folgenden Code verwenden. cols sind Floaterelemente neben margin auto. Wir werden es auch setzen, um keine zu schweben,

      

    Um das obige col-lg-1 mit der class von zentriert zu zentrieren, schreiben wir:

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

    Verwenden Sie text-align:center , um den Inhalt im div zu text-align:center .

     .centered { text-align: center; } 

    Wenn Sie es nur auf dem Desktop und einem größeren Bildschirm zentrieren möchten, nicht auf Mobilgeräten, verwenden Sie die folgende Medienabfrage.

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

    Verwenden Sie den folgenden Code, um das div nur auf der mobilen Version zu zentrieren.

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

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

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

    1. Zentriere eine Spalte von 2, indem du sie verschiebst 5
    2. Erstellen Sie eine verschachtelte Zeile, sodass Sie in Ihren 2 Spalten neue 12 Spalten erhalten.
    3. Da Sie eine Spalte von 1 zentrieren möchten und 1 “Hälfte” von 2 ist (was wir in Schritt 1 zentriert haben), müssen Sie nun eine 6er-Spalte in Ihrer verschachtelten Zeile zentrieren, was leicht durch Versetzen der Spalte erreicht werden kann 3.

    Beispielsweise:

     
    centered column with that has an "original width" of 1 col

    Beachten Sie, dass Sie die Größe des Ausgabefensters vergrößern müssen, um das Ergebnis sehen zu können, andernfalls werden die Spalten umgebrochen.

    Ein anderer Ansatz des Versetzens ist, zwei leere Zeilen zu haben, zum Beispiel:

     
    Centered Content
     

    Dies können wir mithilfe des Tabellenlayout-Mechanismus erreichen:

    Der Mechanismus ist:

    1. Wickeln Sie alle Spalten in einem Div.
    2. Machen Sie das div als Tabelle mit einem festen Layout.
    3. Machen Sie jede Spalte zu einer Tabellenzelle.
    4. Verwenden Sie die Eigenschaft “lotrecht ausrichten”, um die Position des Inhalts zu steuern.

    Die Beispieldemo ist hier

    Geben Sie eine Bildbeschreibung hier ein

    Als Koala_dev in seinem Ansatz 1 verwendet, würde ich die Offset-Methode anstelle von Center-Block oder Margen bevorzugen, die eine begrenzte Verwendung hat, aber wie er erwähnt:

    Nun, es gibt einen offensichtlichen Nachteil für diese Methode, es funktioniert nur für gerade Spaltengrößen, also nur .col-X-2, .col-X-4, Col-X-6, Col-X-8 und Col-X- 10 werden unterstützt.

    Dies kann unter Verwendung des folgenden Ansatzes für ungerade Spalten getriggers werden.

     
    // Your content here

    Sie können die sehr flexible Lösung flexbox zu Ihrem Bootstrap verwenden.

     justify-content: center; 

    kann deine Spalte zentrieren.

    Überprüfen Sie flex .

    Mit Bootstrap v4 kann dies einfach durch Hinzufügen von .justify-content-center zu .row

     
    centered 1 column

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

    Da ich nie die Notwendigkeit habe, nur ein einziges .col- innerhalb eines .row .col- .row , .row ich die folgende class auf das Wrapping .row meiner .row .

     .col-center > [class*="col-"] { float: none; margin-left: auto; margin-right: auto; } 

    Beispiel

     
    Foo
    Bar

    Wenn Sie die Spaltenelemente auf dem Bildschirm zentrieren möchten, wenn Sie nicht die genaue Zahl zum Füllen Ihres Rasters haben, habe ich ein kleines Stück JavaScript geschrieben, um die classnnamen zurückzugeben:

     function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) { var arrayFill = function (size, content) { return Array.apply(null, Array(size)).map(String.prototype.valueOf, content); }; var elementSize = parseInt(12 / elementsPerRow, 10); var normalClassName = 'col-' + screenSize + '-' + elementSize; var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow; var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements; var ret = arrayFill(numberOfFittingElements, normalClassName); var remainingSize = 12 - numberOfRemainingElements * elementSize; var remainingLeftSize = parseInt(remainingSize / 2, 10); return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize)); } 

    Wenn Sie 5 Elemente haben und 3 pro Zeile auf einem md Bildschirm haben wollen, tun Sie dies:

     colCalculator(5, 3, 'md') >> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"] 

    Beachten Sie, dass das zweite Argument um 12 teilbar sein muss.

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

     .many-cols-centered { // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg display:inline-block; float:none; } 

    Also in Ihrem HTML haben Sie etwas wie:

     

    You See

    I love coding.

    You See

    I love coding.

    You See

    I love coding.

    Dies ist nicht mein Code, aber es funktioniert perfekt (getestet auf Bootstrap 3) und ich muss nicht mit col-Offset herumalbern.

    Demo:

     /* 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; } 
     
    Column 6
    Column 6
    Column 3
    Column 3
    Column 3

    Wenn Sie dies auf Ihre Zeile setzen, werden alle Spalten in der Mitte zentriert:

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

    Versuche dies

     

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

    Genauer gesagt enthält das Grid-System von Bootstrap 12 Spalten und um irgendeinen Inhalt zu zentrieren, nehmen wir an, der Inhalt nimmt beispielsweise eine Spalte ein. Man muss zwei Spalten des Bootstrap-Rasters belegen und den Inhalt auf die Hälfte der zwei belegten Spalten setzen.

     
    ... your content / data will come here ...

    ‘col-xs-offset-5’ teilt dem Grid-System mit, wo der Inhalt platziert werden soll.

    ‘col-xs-2’ teilt dem Grid-System mit, wie viele der verbleibenden Spalten der Inhalt belegen soll.

    ‘zentriert’ wird eine definierte class sein, die den Inhalt zentriert.

    So sieht dieses Beispiel im Bootstrap-Grid-System aus.

    Säulen:

    1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

    …… Offset ……. .data. …….nicht benutzt……..

    Probieren Sie diesen Code aus.

      

    Hier habe ich col-lg-1 verwendet, und der Offset sollte 10 für die richtige Zentrierung der div auf großen Geräten sein, wenn Sie es auf mediam zu großen Gerät zentrieren müssen, dann ändern Sie einfach die LG zu MD und so weiter, lassen Sie es mich wissen wenn irgendein Problem.

    Vergessen Sie nicht hinzuzufügen, !important Dann können Sie sicher sein, dass das Element wirklich im Mittelpunkt steht:

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

    Methode 1:

     
    YOUR CONTENT

    Methode 2:

    CSS

     .float-center{float: none;} 
    YOUR CONTENT

    Bootstrap-Tipps, Beispiele und Tools: OnAirCode

    Ich schlage vor, einfach die class text-center :