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>
Ich möchte div
, dass eine Klasse .centered
im Container zentriert wird. Ich kann eine Zeile verwenden, wenn es mehrere div
s gibt, aber im Moment möchte ich nur eine 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 wird, dies um die div
Hälfte auszugleichen . Ich brauche keine freien Räume außerhalb des div
und den Inhalt des div
Schrumpfens 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).
.clearfix
würde in diesem Fall nicht funktionieren, da es die Eigenschaft float auf den Elementen nicht entfernt (was zummargin: 0 auto
float:none;
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-center
um Mitte Text (und Inline - Elemente).Demo : http://bootply.com/91632
BEARBEITEN - Funktioniert, wie in den Kommentaren erwähnt,
center-block
fü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-center
wird immer noch fürdisplay:inline
Elemente verwendetmx-auto
ersetztcenter-block
die zentralendisplay:block
Elementeoffset-*
odermx-auto
kann zum Zentrieren von Rasterspalten verwendet werdenmx-auto
(auto x-Achsen - Ränder) im Mittelpunktdisplay:block
oderdisplay:flex
Elemente , 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
quelle
text-center
Details zu suchen - die keine der anderen Antworten lieferte. Dieser bekommt meine Stimme.float:none;
Jetzt arbeitet Bootstrap 3.1.1 mit
.center-block
und diese Hilfsklasse arbeitet mit dem Spaltensystem.Bootstrap 3 Helper Class Center .
Bitte überprüfen Sie diese jsfiddle DEMO :
Zeilenspaltenmitte mit
col-center-block
Hilfsklasse.quelle
float:none
zum Laufen gebracht, indem ich sichergestellt habe, dass auf den div center-block derstyle="width : ?px"
Stil angewendet wird. Zum Beispiel eine Bildbreite. Arbeitet mit 3.2.2Fü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 .
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.
quelle
3.3.7
und dies ist die einzige Methode, die für mich funktioniert!!important
es notwendig istBootstrap 3 hat jetzt eine eingebaute Klasse dafür
.center-block
Wenn Sie noch 2.X verwenden, fügen Sie dies einfach Ihrem CSS hinzu.
quelle
float:none;
Mein Ansatz zum Zentrieren von Spalten ist die Verwendung
display: inline-block
für Spalten undtext-align: center
für das übergeordnete Container.Sie müssen nur die CSS-Klasse 'zentriert' zum hinzufügen
row
.HTML:
CSS:
JSFiddle: http://jsfiddle.net/steyffi/ug4fzcjd/
quelle
Bootstrap Version 3 verfügt über eine .text-center-Klasse.
Fügen Sie einfach diese Klasse hinzu:
Dieser Stil wird einfach geladen:
Beispiel:
quelle
Mit Bootstrap v4 kann dies nur durch Hinzufügen
.justify-content-center
zum.row
<div>
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
quelle
Das funktioniert. Ein hackiger Weg wahrscheinlich, aber es funktioniert gut. Es wurde auf Ansprechen (Y) getestet.
quelle
img
kann als Block gesetzt werden..centered img { display: inline; }
Ihre Antwort ergänzen und dann wäre es stattdessen eine Aufwertung wert.quelle
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,
Um das obige col-lg-1 mit der Klasse der zentrierten zu zentrieren, schreiben wir:
Verwenden Sie
text-align:center
, um den Inhalt innerhalb des div zu zentrieren ,Wenn Sie es nur auf dem Desktop und einem größeren Bildschirm zentrieren möchten, nicht auf Mobilgeräten, verwenden Sie die folgende Medienabfrage.
Verwenden Sie den folgenden Code, um das div nur auf die mobile Version zu zentrieren.
quelle
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.
Eine Demo finden Sie unter http://codepen.io/Kebten/pen/gpRNMe :-)
quelle
Ein anderer Ansatz zum Versetzen besteht darin, zwei leere Zeilen zu haben, zum Beispiel:
quelle
Sie können
text-center
für die Zeile verwenden und sicherstellen, dass die internen Divs habendisplay:inline-block
(mit nichtfloat
).Wie:
Und CSS:
Die Geige: http://jsfiddle.net/DTcHh/3177/
quelle
Mit Bootstrap 4 können Sie einfach versuchen,
justify-content-md-center
wie hier erwähntquelle
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.
Zum Beispiel:
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.
quelle
Dies ist nicht mein Code, aber er funktioniert perfekt (getestet auf Bootstrap 3) und ich muss nicht mit Col-Offset herumspielen.
Demo:
quelle
Wir können dies erreichen, indem wir den Tabellenlayoutmechanismus verwenden:
Der Mechanismus ist:
Die Beispieldemo ist hier
quelle
Fügen Sie das folgende Snippet in Ihre .row oder Ihre .col ein. Dies ist für Bootstrap 4 *.
quelle
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:
Dies kann mit dem folgenden Ansatz für ungerade Spalten gelöst werden.
quelle
Sie können die sehr flexible Lösungsflexbox für Ihren Bootstrap verwenden.
kann Ihre Spalte zentrieren.
Schauen Sie sich flex an .
quelle
Da ich nie nur eine einzelne
.col-
innerhalb von a.row
zentrieren muss, setze ich die folgende Klasse auf den Umbruch.row
meiner Zielspalten.Beispiel
quelle
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:
Wenn Sie 5 Elemente haben und 3 pro Zeile auf einem
md
Bildschirm haben möchten , gehen Sie folgendermaßen vor:Beachten Sie, dass das zweite Argument durch 12 teilbar sein muss.
quelle
Um mehr als eine Spalte in einer Bootstrap-Zeile zu zentrieren - und die Anzahl
css
der Spalten ist ungerade - fügen Sie diese Klasse einfach allen Spalten in dieser Zeile hinzu:In Ihrem HTML-Code haben Sie also Folgendes:
quelle
Versuche dies
Sie können auch andere
col
wiecol-md-2
usw. verwenden.quelle
Ich schlage vor, einfach die Klasse zu verwenden
text-center
:quelle
Versuchen Sie diesen Code.
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.
quelle
Bootstrap 4- Lösung:
quelle
Wenn Sie dies in Ihre Zeile einfügen, werden alle darin enthaltenen Spalten zentriert:
quelle
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.
'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........
quelle