Zentrieren Sie eine Spalte mit Twitter Bootstrap 3

1146

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

.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>
Erweitern Sie das Snippet

Ich möchte div, dass eine Klasse .centeredim Container zentriert wird. Ich kann eine Zeile verwenden, wenn es mehrere divs gibt, aber im Moment möchte ich nur eine divmit 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 wird, dies um die divHälfte auszugleichen . Ich brauche keine freien Räume außerhalb des divund den Inhalt des divSchrumpfens proportional. Ich möchte den Raum außerhalb des div leeren, um ihn gleichmäßig zu verteilen (schrumpfen, bis die Behälterbreite einer Spalte entspricht).

css  twitter-bootstrap  twitter-bootstrap-3  centering 
— bsr
quelle

Antworten:

1963

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

Ansatz 1 (Offsets):

Der erste Ansatz verwendet Bootstraps eigene Offset-Klassen, sodass keine Änderung des Markups und kein zusätzliches CSS erforderlich ist. Der Schlüssel besteht darin , einen Versatz festzulegen, der der Hälfte der verbleibenden Zeilengröße entspricht . So würde beispielsweise eine Spalte der Größe 2 durch Hinzufügen eines Versatzes von 5 zentriert(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. Es funktioniert nur noch Spaltengrößen , so nur .col-X-2, .col-X-4, col-X-6, col-X-8, und col-X-10werden unterstützt.

Ansatz 2 (der alte margin:auto)

Sie können jede Spaltengröße mithilfe der bewährten margin: 0 auto;Technik zentrieren. Sie müssen sich nur um das Floating kümmern, 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 funktioniert nahtlos mit dem reaktionsschnellen Layout von Bootstrap:

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

Hinweis: Bei beiden Techniken können Sie das .rowElement überspringen und die Spalte in a zentrieren. .containerSie werden jedoch aufgrund des Auffüllens in der Containerklasse einen minimalen Unterschied in der tatsächlichen Spaltengröße feststellen.

Aktualisieren:

Da Bootstrap in Version 3.0.1 über eine integrierte Klasse mit dem Namen verfügt center-block, die verwendet margin: 0 auto, aber fehlt float:none, können Sie diese zu Ihrem CSS hinzufügen, damit sie mit dem Grid-System funktioniert.

— koala_dev
quelle
1
Ich denke, dass es kein Float gibt: keines in der Center-Block-Regel, weil es eine Clearfix-unabhängige Regel gibt, die Sie Elementen zum Löschen von Floats hinzufügen können.
— Diego Fernando Murillo Valenci
7
@DiegoFernandoMurilloValenci .clearfixwürde in diesem Fall nicht funktionieren, da es die Eigenschaft float auf den Elementen nicht entfernt (was zum margin: 0 auto
— Zentrieren
4
kann dies nicht für eine Spalte verwenden, da nofloat:none;
— airtonix
2
Wenn Sie mehr als eine Spalte in einer einzelnen Zeile zentrieren
— Conor Svensson
3
Die Syntax für den Offset wurde in Bootstrap4 geändert (Stand der neuesten Version). Verwenden Sie diese Antwort als Beispiel: Die Klasse col-md-offset-5 sollte jetzt offset-md-5 sein.
— lgants
296

Die bevorzugte Methode zum Zentrieren von Spalten ist die Verwendung von "Offsets" (dh:col-md-offset-3 )

Beispiele für die Bootstrap 3.x-Zentrierung

Zum Zentrieren von Elementen gibt es eine center-block Hilfsklasse .

Sie können auch verwenden , text-centerum Mitte Text (und Inline - Elemente).

Demo : http://bootply.com/91632

BEARBEITEN - Funktioniert, wie in den Kommentaren erwähnt,center-blockfür Spalteninhalte unddisplay:block-elemente, jedoch nicht für die Spalte selbst (col-*divs), da Bootstrap verwendetfloat.

Update 2018

Mit Bootstrap 4 haben sich die Zentrierungsmethoden geändert.

  • text-centerwird immer noch für display:inlineElemente verwendet
  • mx-autoersetzt center-blockdie zentralen display:blockElemente
  • offset-* oder mx-auto kann zum Zentrieren von Rasterspalten verwendet werden

mx-auto(auto x-Achsen - Ränder) im Mittelpunkt display:blockoder display:flexElemente , die eine haben definierte Breite , ( %, vw, px, etc ..). Flexbox wird standardmäßig für Rasterspalten verwendet, daher gibt es auch verschiedene Flexbox-Zentrierungsmethoden.

Demo Bootstrap 4 Horizontale Zentrierung

Informationen zur vertikalen Zentrierung in BS4 finden Sie unter https://stackoverflow.com/a/41464397/171456

— Zim
quelle
31
Leider funktioniert diese Hilfsklasse nicht mit dem Spaltensystem, da sie sich nicht um die Eigenschaft float kümmert. Siehe diese Demo zum Beispiel.
— koala_dev
13
Das erfordert nur einen Center-Block {float: none; }, und es funktioniert. bootply.com/122268
— Matias Vad
5
Ich bin mir nicht sicher über das OP, aber ich bin hierher gekommen, um nach text-centerDetails zu suchen - die keine der anderen Antworten lieferte. Dieser bekommt meine Stimme.
— Domoarigato
1
kann dies nicht für eine Spalte verwenden, da nofloat:none;
— airtonix
98

Jetzt arbeitet Bootstrap 3.1.1 mit .center-blockund diese Hilfsklasse arbeitet 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>

Helferklassenzentrum

Zeilenspaltenmitte mit col-center-blockHilfsklasse.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
— Absender
quelle
Ich habe dies ohne Hinzufügen float:nonezum Laufen gebracht, indem ich sichergestellt habe, dass auf den div center-block der style="width : ?px"Stil angewendet wird. Zum Beispiel eine Bildbreite. Arbeitet mit 3.2.2
— Piotr Kula
Rand: 0 Auto; - genug stattdessen Rand-links + Rand-rechts
— mmike
57

Fügen Sie Ihrer benutzerdefinierten CSS-Datei einfach Folgendes hinzu. Das direkte Bearbeiten von Bootstrap-CSS-Dateien wird nicht empfohlen und beeinträchtigt die Verwendung eines CDN .

.center-block {
    float: none !important
}

Warum?

Bootstrap CSS (Version 3.7 und niedriger) verwendet margin: 0 auto; , wird jedoch von der Eigenschaft float des Größencontainers ü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>
— Sagive SEO
quelle
1
Ich benutze Bootstrap 3.3.7und dies ist die einzige Methode, die für mich funktioniert!
— Illagrenan
1
das funktioniert. aber denken Sie nicht, dass !importantes notwendig ist
— Gianfranco P.
1
@GianfrancoP. Schüler: Dein Recht, aber ... das hängt von der Ladereihenfolge ab und ich wollte eine narrensichere Methode bereitstellen.
— Sagive SEO
39

Bootstrap 3 hat jetzt eine eingebaute Klasse dafür.center-block

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

Wenn Sie noch 2.X verwenden, fügen Sie dies einfach Ihrem CSS hinzu.

— Schmalzy
quelle
Dies würde Ihnen wahrscheinlich den einfachsten Effekt am einfachsten geben. Werfen Sie auch Breite auf die .centered-Klasse oder fügen Sie eine zweite Klasse hinzu, wenn Sie einen modulareren Ansatz wählen
— Matt Lambert
2
Float hinzufügen: keine; Mit .centered können Sie die Klasse in den Container verschieben. hält den Code sauberer
— Adam Patterson
7
kann dies nicht für eine Spalte verwenden, da nofloat:none;
— airtonix
37

Mein Ansatz zum Zentrieren von Spalten ist die Verwendung display: inline-blockfür Spalten und text-align: centerfür das übergeordnete Container.

Sie müssen nur die CSS-Klasse 'zentriert' zum 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/

— Steffi
quelle
2
Dies ist die einzige Antwort, die 100% der Zeit funktioniert hat - Die anderen haben funktioniert, aber nicht, als Bootstrap in die mobile Ansicht gewechselt ist (die Elemente wurden auf die linke Seite verschoben).
— Levi Fuller
Dies war die einzige, die mir auch geholfen hat. .Center-block funktioniert nur für eine Spalte und ich muss alle Spalten zentrieren, unabhängig davon, wie viele es sind.
— Cjohansson
Einzige Lösung, die auch bei mir funktioniert hat. Andere funktionierten nur, wenn der Browser ein Fenster war (nicht Vollbild).
— Kiwicomb123
26

Bootstrap Version 3 verfügt über eine .text-center-Klasse.

Fügen Sie einfach diese Klasse hinzu:

text-center

Dieser Stil wird einfach 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>
— RustyIngles
quelle
Klären Sie, wo diese Klasse hinzugefügt wird?
— Aksu
Hallo @aksu, du musst keine .css hinzufügen. Schauen Sie sich das Beispiel an.
— JoshYates1980
15

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

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

Desktop

Reaktionsschnell

— Ali Gajani
quelle
funktioniert nur, weil das Element diplay inline hat. Ein imgkann als Block gesetzt werden.
— ProfileTwist
Vielleicht in Ihrem isolierten Testfall. Ich würde .centered img { display: inline; }Ihre Antwort ergänzen und dann wäre es stattdessen eine Aufwertung wert.
— ProfileTwist
Kein Problem. Ich bin sicher, dass der OP seine / ihre Antwort finden wird :)
— Ali Gajani
In Bootstrap 3 macht die .text-center-Klasse dasselbe nativ, wie ich oben gelernt habe.
— Domoarigato
7 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
— wali
quelle
6

Um die Farbe zu zentrieren, müssen wir den folgenden Code verwenden. cols sind neben margin auto auch Floater-Elemente. Wir werden es auch so einstellen, dass es keine schwebt,

<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 der Klasse der zentrierten 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 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 die mobile Version zu zentrieren.

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

Stellen Sie einfach Ihre eine Spalte, in der der Inhalt angezeigt wird, auf col-xs-12 (mobile-first ;-) ein und konfigurieren Sie den Container nur, um zu steuern, wie breit Ihr zentrierter 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>
Erweitern Sie das Snippet

<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>
Erweitern Sie das Snippet

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

— Kieran Ryan
quelle
6

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>
— LeRoy
quelle
1
2 nutzlose divs, col-md-offset- * ist besser
— ymakux
1
Genau. Ich habe diese Methode verwendet, weil sie tatsächlich gut funktioniert und getestet wurde.
— LeRoy
6

Sie können text-centerfür die Zeile verwenden und sicherstellen, dass die internen Divs haben display:inline-block(mit nichtfloat ).

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/

— Alireza Fattahi
quelle
6

Mit Bootstrap 4 können Sie einfach versuchen, justify-content-md-centerwie hier erwähnt

<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>

Geben Sie hier die Bildbeschreibung ein

— Hossein Narimani Rad
quelle
1
@AdamErickson Die Frage wurde speziell für eine Bootstrap 3-Lösung gestellt. Da diese Antwort wahrscheinlich der
— richtige
5

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. Durch Verschachteln von Zeilen können Sie jedoch auch ungleichmäßige 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 2er-Spalte, indem Sie sie versetzen. 5
  2. Erstellen Sie eine verschachtelte Zeile, sodass Sie innerhalb Ihrer 2 Spalten neue 12 Spalten erhalten.
  3. Da Sie eine Spalte mit 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 mit 6 in Ihrer verschachtelten Zeile zentrieren, was durch einfaches Versetzen von 3 leicht möglich ist.

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>

Sehen Sie sich diese Geige an . Bitte beachten Sie, dass Sie das Ausgabefenster vergrößern müssen, um auch das Ergebnis zu sehen. Andernfalls werden die Spalten umbrochen.

— reinder
quelle
5

Dies ist nicht mein Code, aber er funktioniert perfekt (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>
Erweitern Sie das Snippet

— Binar Web
quelle
4

Wir können dies erreichen, indem wir den Tabellenlayoutmechanismus verwenden:

Der Mechanismus ist:

  1. Wickeln Sie alle Spalten in ein Div.
  2. Machen 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 Inhaltsposition zu steuern.

Die Beispieldemo ist hier

Geben Sie hier die Bildbeschreibung ein

— Mohan Dere
quelle
4

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

d-flex justify-content-center
— Thomas Chirwa
quelle
3

Wie koala_dev in seinem Ansatz 1 verwendete, würde ich die Offset-Methode anstelle des Mittelblocks oder der Ränder bevorzugen, die nur begrenzt verwendet werden, aber wie er erwähnte:

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>
— Abhinav Singh
quelle
3

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

justify-content: center;

kann Ihre Spalte zentrieren.

Schauen Sie sich flex an .

— Hart
quelle
2

Da ich nie nur eine einzelne .col-innerhalb von a .rowzentrieren muss, setze ich die folgende Klasse auf den Umbruch .rowmeiner Zielspalten.

.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>
— Walter Roman
quelle
2

Für diejenigen, die die Spaltenelemente auf dem Bildschirm zentrieren möchten, wenn Sie nicht die genaue Zahl haben, um Ihr Raster zu fü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 mdBildschirm 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.

— jsgoupil
quelle
2

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

In Ihrem HTML-Code haben Sie also Folgendes:

<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>
— Ruto Collins
quelle
2

Versuche dies

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

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

— Ch UmarJamil
quelle
2

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

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

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 betragen, um das div auf großen Geräten richtig zu zentrieren. Wenn Sie es benötigen, um sich auf mittelgroße bis große Geräte zu konzentrieren, ändern Sie einfach das lg in md und so weiter.

— Bangash
quelle
2

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>
— JanBrus
quelle
1

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

.row-centered {
    display: flex;
    justify-content: space-between;
}
— Eran Shabi
quelle
machte das Element nicht ansprechbar.
— Gfivehost
1

Genauer gesagt enthält das Rastersystem von Bootstrap 12 Spalten. Um Inhalte zu zentrieren, nimmt der Inhalt beispielsweise eine Spalte ein. Man muss zwei Spalten des Bootstrap-Rasters 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 im Bootstrap-Rastersystem aus.

Säulen:

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

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

— Technik
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.