Frage Zentrieren Sie eine Spalte mit Twitter Bootstrap 3


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

Bitte sehen Sie den Starter Geige.

<body class="container">
    <div class="col-lg-1 col-offset-6 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Also, ich möchte eine divmit einer Klasse centered innerhalb des Containers zentriert 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 auszugleichen div um die Hälfte. Ich brauche keine freien Plätze außerhalb der div und der Inhalt der div im Verhältnis verkleinern. Ich möchte leerer Raum außerhalb des divs, um gleichmäßig verteilt zu sein (schrumpfen bis zur Behälterbreite == eine Spalte).


972
2017-08-09 18:24


Ursprung


Antworten:


Es gibt zwei Ansätze zum Zentrieren einer Spalte <div> in Bootstrap 3:

Ansatz 1 (Offsets):

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

Im Markup würde das so aussehen:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Nun, es gibt einen offensichtlichen Nachteil für diese Methode, Es funktioniert nur für gleichmäßige Spaltengrößennur so .col-X-2, .col-X-4, col-X-6, col-X-8 und col-X-10 sind unterstützt.


Ansatz 2 (der alte Rand: auto)

Sie können Zentrieren Sie 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-Klasse 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:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Hinweis: Mit beiden Techniken konnte man die .row Element und haben die Spalte in a zentriert .container Sie würden jedoch aufgrund der Auffüllung in der Containerklasse einen minimalen Unterschied in der tatsächlichen Spaltengröße feststellen.


Aktualisieren:

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


1745
2017-08-09 18:45



Die bevorzugte Methode von Zentriersäulen ist es, "Offsets" (dh: col-md-offset-3)

Bootstrap 3.x Zentrierungsbeispiele

Zum Zentrierelemente, da ist ein center-block  Helferklasse.

Sie können auch verwenden text-center zu Zentrierter Text (und Inline-Elemente).

Demo: http://bootply.com/91632

BEARBEITEN - Wie in den Kommentaren erwähnt, center-block arbeitet an Spalteninhalten und display:block Elemente, aber nicht auf die Spalte selbst (col-* divs), weil Bootstrap verwendet float.


Aktualisierung 2018

Jetzt mit Bootstrap 4, das Zentrierung Methoden haben sich geändert ..

  • text-centerwird immer noch benutzt für display:inline Elemente
  • mx-auto ersetzt center-block zum Zentrum display:block Elemente
  • offset-*  oder  mx-auto kann verwendet werden, um Rasterspalten zu zentrieren

mx-auto (automatische X-Achsen-Ränder) zentriert display:block oder display:flex Elemente mit a definierte Breite, (%, vw, px, etc..). Flexbox wird standardmäßig verwendet Auf Rasterspalten gibt es also auch verschiedene Flexbox-Zentriermethoden.

Demo Bootstrap 4 horizontale Zentrierung

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


244
2017-12-03 18:12



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

Bootstrap 3 Helfer-Klassenzentrum.

Bitte prüfe diese jsfiddle DEMO:

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Helper classes center

Zeilenspaltenmitte mit col-center-block Helferklasse.

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

90
2018-03-18 06:31



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: Rand: 0 automatisch;, aber es wird von der Float-Eigenschaft des Größencontainers überschrieben.

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

<div class="col-md-6 center-block">Example</div>

50
2017-12-15 03:12



Bootstrap 3 hat jetzt eine eingebaute Klasse dafür .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.


37
2017-08-09 18:39



Mein Ansatz für die Verwendung von mittleren Spalten ist zu verwenden display: inline-block für Spalten und text-align: center für den Container-Elternteil.

Sie müssen nur die CSS-Klasse 'zentriert' hinzufügen row.

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

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/


31
2018-02-16 10:27



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

Fügen Sie einfach diese Klasse hinzu:

text-center

Es wird einfach diesen Stil laden:

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

Beispiel:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>   

25
2017-07-16 14:20



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

Responsive


11
2017-08-09 21:47



Sie können verwenden text-center für die Zeile, und stellen Sie sicher, dass die internen Divs haben display:inline-block (mit nicht float )

wie:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

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/


6
2018-01-13 08:39