it-swarm.com.de

Zentrieren Sie eine Spalte mit Twitter Bootstrap 3

Wie zentriere ich einen Div von einer Spaltengröße innerhalb des Containers (12 Spalten) in Twitter Bootstrap ?

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

Ich möchte, dass ein div mit einer Klasse .centered innerhalb des Containers zentriert wird. Ich kann eine Zeile verwenden, wenn es mehrere divs gibt, aber ich möchte nur ein div mit der Größe einer Spalte, die im Container zentriert ist (12 Spalten).

Ich bin mir auch nicht sicher, ob der obige Ansatz gut genug ist, da nicht beabsichtigt ist, den div um die Hälfte zu verrechnen. Ich benötige keine freien Plätze außerhalb von div und der Inhalt von div wird proportional kleiner. Ich möchte leeren Raum außerhalb des div gleichmäßig verteilt werden (schrumpfen, bis die Behälterbreite gleich einer Spalte ist).

1089
bsr

Es gibt zwei Möglichkeiten, eine Spalte <div> in Bootstrap 3 zu zentrieren:

Ansatz 1 (Offsets):

Der erste Ansatz verwendet Bootstraps eigene Offset-Klassen, sodass keine Änderungen am Markup und kein zusätzliches CSS erforderlich sind. Der Schlüssel ist setze einen Versatz gleich der Hälfte der verbleibenden Zeilengröße. Zum Beispiel würde eine Spalte der Größe 2 durch Hinzufügen eines Versatzes von 5 zentriert, das ist (12-2)/2.

Im Markup würde dies so aussehen:

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

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


Ansatz 2 (der alte margin:auto)

Sie können jede Spaltengröße zentrieren mithilfe der bewährten margin: 0 auto; -Technik. Sie müssen sich nur um das Floating kümmern, das durch das Rastersystem von Bootstrap hinzugefügt wird. Ich empfehle, eine benutzerdefinierte CSS-Klasse wie die folgende zu definieren:

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

Jetzt können Sie es zu jeder Spaltengröße in jeder Bildschirmgröße hinzufügen und es funktioniert nahtlos mit dem ansprechenden Layout von Bootstrap:

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

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


pdate:

Da v3.0.1 Bootstrap eine integrierte Klasse mit dem Namen center-block hat, die margin: 0 auto verwendet, jedoch float:none fehlt, können Sie dies Ihrem CSS hinzufügen arbeiten mit dem Rastersystem.

1908
koala_dev

Die bevorzugte Methode für Spalten zentrieren ist die Verwendung von "Offsets" (dh: col-md-offset-3)

Beispiele für Bootstrap 3.x-Zentrierung

Für Zentrierungselemente gibt es einen center-blockHilfsklasse .

Sie können auch text-center verwenden, um Text zentrieren (und Inline-Elemente).

Demo: http://bootply.com/91632

EDIT - Wie in den Kommentaren erwähnt, funktioniert center-block mit Spalteninhalten und display:block Elementen, aber nicht Arbeiten Sie an der Spalte selbst (col-* divs), da Bootstrap float verwendet.


Update 2018

Mit Bootstrap 4 haben sich die centering Methoden geändert.

  • text-center wird weiterhin für display:inline Elemente verwendet
  • mx-auto ersetzt center-block, um display:block Elemente zu zentrieren
  • offset-* oder mx-auto können zum Zentrieren von Gitterspalten verwendet werden

mx-auto (automatische X-Achsen-Ränder) zentriert display:block oder display:flex Elemente mit einer definierten Breite , (% , vw, px, etc ..). Flexbox wird standardmäßig verwendet ​​für Rasterspalten, daher gibt es auch verschiedene flexbox Zentrierungsmethoden.

Demo Bootstrap 4 Horizontale Zentrierung

Zur vertikalen Zentrierung in BS4 siehehttps://stackoverflow.com/a/41464397/171456

286
Zim

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

Bootstrap 3 Helper Class Center .

Bitte überprüfen Sie 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 der Hilfsklasse col-center-block.

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

Fügen Sie Ihrer benutzerdefinierten CSS-Datei einfach Folgendes hinzu. Das direkte Bearbeiten von Bootstrap CSS-Dateien wird nicht empfohlen und macht die Verwendung eines CDN unmöglich.

.center-block {
    float: none !important
}

Warum?

Bootstrap-CSS (Version 3.7 und niedriger) verwendet margin: 0 auto; , wird jedoch von der float-Eigenschaft des size-Containers überschrieben.

PS:

Vergessen Sie nach dem Hinzufügen dieser Klasse nicht, die Klassen in der richtigen Reihenfolge festzulegen.

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

Bootstrap hat jetzt eine eingebaute Klasse 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 dies einfach Ihrem CSS hinzu.

39
Schmalzy

Mein Ansatz zum Zentrieren von Spalten besteht darin, display: inline-block für Spalten und text-align: center für den übergeordneten Container zu verwenden.

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

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/

35
Steffi

Bootstrap Version 3 hat eine .text-center Klasse.

Fügen Sie einfach diese Klasse hinzu:

text-center

Es wird einfach dieser Stil geladen:

.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>   
26
RustyIngles

Mit Bootstrap v4 kann dies einfach durch Hinzufügen von .justify-content-center zum .row<div> erreicht werden.

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

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

20
joknawe

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

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

Desktop

Responsive

14
Ali Gajani

Setzen Sie einfach Ihre eine Spalte, in der der Inhalt angezeigt wird, auf col-xs-12 (mobile-first ;-) und konfigurieren Sie den Container nur so, dass Sie steuern können, wie breit der zentrierte Inhalt sein soll.

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}
<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Eine Demo finden Sie unter http://codepen.io/Kebten/pen/gpRNMe :-)

6
Kieran Ryan

Sie können text-center für die Zeile verwenden und sicherstellen, dass die internen Divs display:inline-block haben (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
Alireza Fattahi
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
6
wali

Ein anderer Ansatz zum Versetzen besteht darin, zwei leere Zeilen zu haben, zum Beispiel:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
5
LeRoy

Dies ist wahrscheinlich nicht die beste Antwort, aber es gibt eine weitere kreative Lösung dafür. Wie von koala_dev hervorgehoben, funktioniert der Spaltenversatz nur für gerade Spaltengrößen. Indem Sie Zeilen verschachteln, können Sie jedoch auch ungleichmäßige 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. Zentrieren Sie eine Spalte von 2, indem Sie sie um 5 versetzen
  2. Erstellen Sie eine verschachtelte Zeile, sodass Sie innerhalb Ihrer 2 Spalten 12 neue Spalten erhalten.
  3. Da 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 jetzt eine Spalte von 6 in Ihrer verschachtelten Zeile zentrieren, was einfach durch Versetzen von 3 erreicht werden kann.

Zum Beispiel:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

Siehe diese Geige , bitte beachten Sie, dass Sie das Ausgabefenster vergrößern müssen, damit auch das Ergebnis angezeigt wird. Andernfalls werden die Spalten umgebrochen.

5
reinder

Um die Farbe zu zentrieren, müssen wir den folgenden Code verwenden. cols sind neben margin auto floater-elemente. Wir werden es auch so einstellen, dass es nicht schwimmt,

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

Um das obige col-lg-1 mit class of centred zu zentrieren, schreiben wir:

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

Verwenden Sie text-align:center, um den Inhalt innerhalb des div zu zentrieren.

.centered {
    text-align: center;
}

Wenn Sie es nur auf dem Desktop und auf einem größeren Bildschirm zentrieren möchten, nicht auf einem Mobilgerät, 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 Mobilgeräten zu zentrieren.

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

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

Demo:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>
4
Binar Web

Wir können dies erreichen, indem wir den Tabellenlayout-Mechanismus verwenden:

Der Mechanismus ist:

  1. Wickeln Sie alle Spalten in einem Div.
  2. Erstellen Sie dieses Div als Tabelle mit einem festen Layout.
  3. Machen Sie jede Spalte als Tabellenzelle.
  4. Verwenden Sie die Eigenschaft "Vertikal ausrichten", um die Position des Inhalts zu steuern.

Die Beispieldemo ist hier

Enter image description here

4
Mohan Dere

Da koala_dev in seinem Ansatz 1 verwendet wurde, würde ich die Offset-Methode anstelle von Center-Block oder Rändern bevorzugen, die nur begrenzt verwendet werden, aber wie er sagte:

Jetzt gibt es einen offensichtlichen Nachteil für diese Methode, sie 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 mit dem folgenden Ansatz für ungerade Spalten gelöst werden.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>
3
Abhinav Singh

Sie können die sehr flexible Lösung flexbox für Ihren Bootstrap verwenden.

justify-content: center;

kann Ihre Spalte zentrieren.

Check out flex.

3
Harsh

Mit bootstrap 4 können Sie einfach justify-content-md-center versuchen, wie es erwähnt wird hier

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

enter image description here

Da ich nie nur einen einzigen .col- innerhalb eines .row zentrieren muss, habe ich die folgende Klasse für den Zeilenumbruch .row meiner Zielspalten festgelegt.

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

Beispiel

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>
2
Walter Roman

Um mehr als eine Spalte in einer Zeile Bootstrap zu zentrieren - und die Anzahl der Spalten ist ungerade, fügen Sie einfach diese Klasse css 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:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>
2
Ruto Collins

Fügen Sie das folgende Snippet in Ihre .row- oder .col-Datei ein. Dies ist für Bootstrap 4 *.

d-flex justify-content-center
2
Thomas Chirwa

Für diejenigen, die die Spaltenelemente auf dem Bildschirm zentrieren möchten, wenn Sie nicht die genaue Anzahl haben, um Ihr Raster auszufüllen, habe ich ein kleines Stück JavaScript geschrieben, um die Klassennamen 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 Bildschirm md haben möchten, gehen Sie folgendermaßen vor:

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 durch 12 teilbar sein muss.

2
jsgoupil

Bootstrap 4 Lösung:

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
2
JanBrus

Versuchen Sie diesen Code.

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

Hier habe ich col-lg-1 verwendet, und der Versatz sollte 10 sein, um das div bei großen Geräten richtig zu zentrieren. Wenn Sie es für mittelgroße bis große Geräte benötigen, ändern Sie einfach lg in md und so weiter.

2
Bangash

Ich schlage vor, einfach die Klasse text-center zu verwenden:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
1
Dadhich Sourav

Verwenden Sie mx-auto in Ihrer div-Klasse mit Bootstrap 4.

<div class="container">
  <div class="row">
    <div class="mx-auto">
      You content here
    </div>
  </div>
</div>
1
B-M

Wenn Sie dies in Ihre Zeile einfügen, werden alle darin enthaltenen Spalten zentriert:

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

Methode 1:

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

Methode 2:

CSS

.float-center{float: none;}


<div class="container">
    <div id="mydev" class="center-block float-center" style="width:75%;">
        YOUR CONTENT
    </div>
</div>

Bootstrap-Tipps, Beispiele und Tools: OnAirCode

1

Um genauer zu sein, enthält das Rastersystem von Bootstrap 12 Spalten, und um Inhalte zu zentrieren, nehmen sie beispielsweise eine Spalte ein. Man muss zwei Spalten des Bootstrap-Gitters belegen und den Inhalt auf die Hälfte der beiden belegten Spalten platzieren.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5' teilt dem Rastersystem mit, wo mit dem Platzieren des Inhalts begonnen werden soll.

'col-xs-2' teilt dem Rastersystem mit, wie viele der verbleibenden Spalten der Inhalt belegen soll.

'zentriert' ist eine definierte Klasse, die den Inhalt zentriert.

So sieht dieses Beispiel in Bootstraps Rastersystem aus.

Säulen:

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

....... Offset ....... .Daten. .......nicht benutzt........

1
Tech

Versuche dies

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

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

1
Ch UmarJamil

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

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