Ich versuche, einem sehr einfachen Beispiel zu folgen. Mit der Starterseite und dem Grid-System habe ich folgendes gehofft:
<div class="row">
<div class="span12">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
... würde zentrierten Text erzeugen.
Es erscheint jedoch immer noch ganz links. Was mache ich falsch?
Für andere Arten von Inhalten siehe Flaviens Antwort .
Update: Bootstrap 2.3.0+ Antwort
Die ursprüngliche Antwort war für eine frühe Version von Bootstrap. Ab Bootstrap 2.3.0 kann dem Div einfach die Klasse .text-center
zugewiesen werden.
Originalantwort (vor 2.3.0)
Sie müssen eine der beiden Klassen row
oder span12
mit einem text-align: center
definieren. Siehe http://jsfiddle.net/xKSUH/ oder http://jsfiddle.net/xKSUH/1/
HINWEIS: Dies war in Bootstrap 3 entfernt .
Vor dem Bootstrap 3 können Sie die CSS-Klasse pagination-centered
folgendermaßen verwenden:
<div class="span12 pagination-centered">
Centered content.
</div>
Die Klasse pagination-centered
befindet sich bereits in bootstrap.css (oder bootstrap.min.css) und hat die einzige Regel:
.pagination-centered{text-align:center;}
Mit Bootstrap 2.3.0. benutze einfach die Klasse text-center
Ich denke, die meisten Leute hier suchen tatsächlich nach dem Weg zu zentrieren Sie das Ganze div
und nicht nur den Textinhalt (was trivial ist ...).
Die zweite Möglichkeit (anstelle von text-align: center) zum Zentrieren von Objekten in HTML besteht darin, ein Element mit fester Breite und automatischem Rand (links und rechts) zu haben. Bei Bootstrap ist der Stil, der die automatischen Ränder definiert, die "Container" -Klasse.
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
Schauen Sie hier nach einer Geige: http://jsfiddle.net/D2RLR/7788/
Bootstrap 3.1.1 hat eine .center-block
-Klasse zum Zentrieren von divs. Siehe: http://getbootstrap.com/css/#helper-classes-center .
Inhaltsblöcke zentrieren Setzen Sie ein Element auf
display: block
und zentrieren Sie es übermargin
. Verfügbar als Mixin und Klasse.
<div class="center-block">...</div>
Oder verwenden Sie, wie andere bereits gesagt haben, die .text-center
-Klasse, um den Text zu zentrieren.
Am besten definieren Sie dazu einen CSS-Stil:
.centered-text {
text-align:center
}
Wo immer Sie zentrierten Text benötigen, fügen Sie ihn so hinzu:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
oder wenn Sie nur das p-Tag zentriert haben möchten:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
Je weniger Inline-CSS Sie verwenden, desto besser.
"Zentrierter Inhalt" kann viele verschiedene Dinge bedeuten, und die Zentrierung von Bootstrap hat sich seit dem ursprünglichen Beitrag stark verändert.
Bootstrap 3
text-center
wird für display:inline
-Elemente verwendetcenter-block
, um display:block
-Elemente zu zentrierencol-*offset-*
zum Zentrieren der RasterspaltenDemo Bootstrap 3 Horizontale Zentrierung
Bootstrap 4
text-center
wird weiterhin für display:inline
-Elemente verwendetmx-auto
ersetzt center-block
, um display:block
-Elemente zu zentrierenoffset-*
odermx-auto
kann zum Zentrieren von Rasterspalten verwendet werdenjustify-content-center
in row
kann auch zum Zentrieren von col-*
verwendet werden mx-auto
(automatische x-Achsenränder) zentriert display:block
- oder display:flex
-Elemente mit definierte Breite, (%
, vw
, px
usw.). Flexbox wird standardmäßig in Rasterspalten verwendet, daher gibt es auch verschiedene Flexbox-Zentrierungsmethoden.
Demo Bootstrap 4 Horizontale Zentrierung
Da Bootstrap 4 standardmäßig flexbox ist, gibt es viele verschiedene Ansätze für die vertikale Ausrichtung: auto-margin , flexbox utils oder die display utils zusammen mit vertical Hilfsmittel ausrichten . Auf den ersten Blick scheint "Vertical Align Utils" offensichtlich, aber diese nur arbeiten mit Inline- und Tabellen-Anzeigeelementen. Hier sind einige vertikale Optionen für das Bootstrap 4-System.
1 - Vertikales Zentrum mit automatischen Rändern:
Eine andere Möglichkeit, vertikal zu zentrieren, ist my-auto
. Dadurch wird das Element in seinem Container zentriert. Zum Beispiel macht h-100
die ganze Höhe der Zeile und my-auto
zentriert die Spalte col-sm-12
vertikal.
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertikales Zentrum mit automatischen Rändern Demo
my-auto
steht für Ränder auf der vertikalen Y-Achse und entspricht:
margin-top: auto;
margin-bottom: auto;
2 - Vertikales Zentrum mit Flexbox:
Da Bootstrap 4 .row
jetzt display:flex
ist, können Sie einfach align-self-center
für jede Spalte verwenden, um es vertikal zu zentrieren ...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
oder verwenden Sie align-items-center
für den gesamten .row
, um alle col-*
in der Zeile vertikal zentrieren zu lassen ...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertikale vertikale Spalte mit unterschiedlicher Höhe Demo
3 - Vertikales Zentrum mit Anzeigeelementen:
Bootstrap 4 verfügt über Anzeige-Utils , die für display:table
, display:table-cell
, display:inline
usw. verwendet werden können. Diese können mit den vertikalen Ausrichtungs-Utils zum Ausrichten von Inline-, Inline-Block- oder Tabellenzellenelementen verwendet werden.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
Ab Februar 2013 füge ich in einigen Fällen dem "span" -Div eine "zentrierte" Klasse hinzu:
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
und zu CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
Der Grund dafür ist, dass das span * div nach links verschoben wird und die Zentrierungstechnik "automatischer Rand" nur funktioniert, wenn das div nicht verschoben wird.
Demo (auf JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/
JSFiddle: http://jsfiddle.net/5RpSh/8/
Die Klasse .show-grid wendet zentriert ausgerichteten Text im Beispiel in der Verknüpfung an.
Sie können jederzeit style="text-align:center"
zu Ihrem Zeilen-Div oder einer anderen Klasse hinzufügen, denke ich.
Wenn Sie Bootstrap 3 verwenden, hat es auch eine integrierte CSS-Klasse mit dem Namen .text-center. Das ist, was du willst.
<div class="text-left">
left
</div>
<div class="text-center">
center
</div>
<div class="text-right">
right
</div>
Bitte sehen Sie sich das Beispiel in jsfiddle an. http://jsfiddle.net/ucheng/Q4Fue/
Bootstrap 2.3 hat eine text-center
-Klasse.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
Auf meiner Seite definiere ich neue CSS
-Stile, die sofort verwendet werden können und leicht zu merken sind:
.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;} /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}
Ist das eine gute Idee? Gibt es eine gute Praxis dafür?
Wenn Sie Bootstrap 2.0 oder höher verwenden
Dadurch kann das Div auf die Seite zentriert werden.
<div class="row">
<div class="span4 offset4">
//your content here gets centered of the page
</div>
</div>
Jede Hilfsmittelklasse für Textausrichtung würde den Trick ausführen. Bootstrap verwendet die .text-center
-Klasse seit langem zum Zentrieren von Text.
.text-center { text-align: center !important; }
Oder Sie können eigene Dienstprogramme erstellen. Einige Variationen, die ich im Laufe der Jahre gesehen habe:
.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
Sie müssen mit dem .span
anpassen.
Beispiel:
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
<!--/span-->
<div class="span4" align="center">
<div class="hero-unit" align="center">
<h3>Sign In</h3>
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i> </span>
<input class="span6" type="text" placeholder="Email address">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i> </span>
<input class="span6" type="password" placeholder="Password">
</div>
</form>
</div>
</div>
<!-- /span -->
<div class="span4"></div>
</div>
<!-- /row -->
</div>
Meine bevorzugte Methode zum Zentrieren von Informationsblöcken bei gleichzeitiger Aufrechterhaltung der Reaktionsfähigkeit (Kompatibilität mit Mobilgeräten) besteht darin, zwei leere span1
-Divs vor und nach dem Inhalt zu platzieren, den Sie zentrieren möchten.
<div class="row-fluid">
<div class="span1">
</div>
<div class="span10">
<div class="hero-unit">
<h1>Reading Resources</h1>
<p>Read here...</p>
</div>
</div><!--/span-->
<div class="span1">
</div>
</div><!--/row-->
Für Bootstrap Version 3.1.1 und höher ist die .center-block
-Hilferklasse die beste Klasse zum Zentrieren des Inhalts.
Sie können einen der folgenden Typen verwenden
text-center
.style = "text-align:center"
.Verwenden Sie einen Spaltenversatz:
Beispiel: <div class="col-md-offset-6 col-md-12"></div>
Center-Block ist auch eine Option, auf die in den obigen Antworten nicht verwiesen wird
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
Alles, was die Klasse center-block
tut, ist, dem Element einen Rand von 0 auto zu geben, wobei das auto der linke/rechte Rand ist. Es sei denn, die Klasse text-center oder css text-align: center; auf dem übergeordneten Element festgelegt ist, kennt das Element den Punkt nicht, von dem aus diese automatische Berechnung ausgeführt werden soll, und zentriert sich daher nicht wie erwartet.
Text-Center ist also eine bessere Option.
<div class="container">
<div class="col-md-12 centered">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
label
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
Verwenden Sie keine Behälterflüssigkeit in der Hauptleitung.
Verwenden Sie einfach eine Klasse (Textzentrum) für das gewünschte div oder Tag. Ich denke, es funktioniert gut. Es ist eine Bootstrap-Klasse für Textausrichtungsmitte.
Hier sind einige Bootstrap-Klassen für die Textausrichtung:
text-left, text-right, text-justify, etc.
<div class="row">
<div class="col-md-12 text-center">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
Ich habe zwei Wege ausprobiert und es hat gut funktioniert, das div zu zentrieren. Bei beiden Methoden werden die divs auf allen Bildschirmen ausgerichtet.
Möglichkeit 1: Verwenden von Push:
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-Push-4 col-md-Push-4 col-sm-Push-4 col-xs-Push-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
</div>
Möglichkeit 2: Versatz verwenden:
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>
Ergebnis:
Erklärung
Bootstrap bezeichnet links die erste Spalte der angegebenen Bildschirmbelegung. Wenn wir offset oder Push verwenden, wird die Spalte 'this' um 'viele' Spalten verschoben. Obwohl ich einige Probleme bei der Reaktionszeit von Offset hatte, war Push großartig.
Update 2018:
In Bootstrap 4.1.3 kann der Inhalt mit der Klasse mx-auto
zentriert werden.
<div class="mx-auto">
Centered element
</div>
Referenz: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering
Ich habe diese Klasse erstellt, um die Zentrierung unabhängig von der Bildschirmgröße beizubehalten, während die responsiven Funktionen beibehalten werden:
.container {
alignment-adjust: central;
}