Wie erhalten Sie mit Twitter Bootstrap zentrierte Inhalte?

569

Ich versuche einem sehr einfachen Beispiel zu folgen. Mit der Startseite und dem Rastersystem hatte 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?

Hoa
quelle
5
Möchten Sie, dass der Text im zentrierten '<div class = "span12">' zentriert wird, oder möchten Sie, dass das gesamte '<div class = "row">' div im Browserfenster zentriert ist?
NerdFury
Aktualisieren Sie den Link zu twitter.github.com/bootstrap/scaffolding.html#gridSystem
Amol M Kulkarni
3
@ Chloe Leute, die sich für HTML-Kompatibilität interessieren. <center>ist veraltet, text-align: centerwofür übrigens genau das ist, was die Bootstrap-Klasse .text-centerumschließt.
jmoss
Wenn Sie Bootstrap 4 verwenden, siehe: stackoverflow.com/questions/42388989/…
Zim

Antworten:

690

Dies ist für die Textzentrierung ( worum es bei der Frage ging )

Weitere Arten von Inhalten finden Sie in der Antwort von Flavien .

Update: Bootstrap 2.3.0+ Antwort

Die ursprüngliche Antwort war für eine frühe Version von Bootstrap. Ab Bootstrap 2.3.0 können Sie dem div einfach die Klasse geben.text-center .


Ursprüngliche Antwort (vor 2.3.0)

Sie müssen eine der beiden Klassen definieren rowoder span12mit a text-align: center. Siehe http://jsfiddle.net/xKSUH/ oder http://jsfiddle.net/xKSUH/1/

ScottS
quelle
2
Ich habe dies sowohl für Zeile als auch für span12 versucht, aber meine Tabelle in span12 und in der Zeile befindet sich immer links. Durch Hinzufügen von Polstern wird es in die Mitte verschoben, aber ich möchte es reaktionsschnell zentrieren. Kann ich irgendwie automatisch auffüllen?
ATSiem
Ich sehe, dass dies funktioniert, aber warum sollten wir es definieren müssen. Sind diese nicht bereits definiert? Ich spreche nur über den Text ...
Akshat Jiwan Sharma
@ AkshatJiwanSharma - Die Klassen sind definiert, aber zuletzt habe ich nachgesehen, dass dies text-align: centerfür diese Klassen nicht die Standardeinstellung ist. Normalerweise ist die Standardeinstellung die leftAusrichtung.
ScottS
für vor 2.3.0 .pagination-centeredfunktioniert das auch: P erspart Ihnen den Tastendruck zum Hinzufügen einer weiteren Klasse.
Sarim
@Sarim: Eigentlich pagination-centeredmüssen Sie dem HTML eine weitere Klasse hinzufügen. Meine Antwort vor 2.3.0 erfordert nur eine, um die Eigenschaftsdefinition einer bereits vorhandenen Klasse zu erweitern. Wenn Sie sich die Kommentare zur Antwort mit ansehen pagination-centered, werden Sie auch einige diesbezügliche Einwände und Warnungen finden. Aber wenn es in Ihrem Fall für Sie funktioniert - gehen Sie dazu! :-)
ScottS
240

HINWEIS: Dies wurde in Bootstrap 3 entfernt .


Vor Bootstrap 3 können Sie die CSS-Klasse folgendermaßen verwenden pagination-centered:

<div class="span12 pagination-centered">
    Centered content.
</div>

Die Klasse pagination-centeredbefindet 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 classtext-center

Iurii.K
quelle
41
Ich würde nicht vorschlagen, dies als sehr spezifisch für die Paginierung zu verwenden (wie aus dem Klassennamen abgeleitet). Es kann zu Konflikten mit Stilen kommen, die Sie auf die Paginierung anwenden, und ist möglicherweise nicht mit zukünftigen Updates kompatibel, wenn Bootstrap entscheidet, dass diese Klasse mehr für die zentrierte Paginierung tun muss.
Dayson
4
@ lurii.k Dies macht ALLES zentriert, einschließlich Kinder. Was ist, wenn wir nur den äußeren Behälter ausrichten möchten, aber alles darin links ausrichten möchten?
Gatzkerob
1
Mit Bootstrap 2.3.0. Verwenden Sie einfach die CSS-Klasse .text-center
Iurii.K
Größte Antwort bisher! Arbeiten Sie mit Bootstrap 2.3.2
jQuery00
4
Es scheint, dass Bootstrap 3.0.0 diese Klasse entfernt hat. Die Verwendung .text-centerauf dem übergeordneten Element ist die richtige Lösung für diese Version.
Blazemonger
152

Ich denke, die meisten Leute hier suchen tatsächlich nach dem Weg, das Ganze zu zentrierendiv und nicht nur den Textinhalt zu zentrieren (was trivial ist…).

Die zweite Möglichkeit (anstelle von text-align: center), Dinge in HTML zu zentrieren, besteht darin, ein Element mit einer festen Breite und einem automatischen Rand (links und rechts) zu haben. Bei Bootstrap ist der Stil, der automatische 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/

Flavien Volken
quelle
9
Dies ist die richtige Antwort, wie hier offiziell dokumentiert: twitter.github.com/bootstrap/scaffolding.html#layouts
Qlimax
2
@Qlimax Ihr Link scheint defekt zu sein, ich denke, das ist, was Sie für 2.3.2 wollten: getbootstrap.com/2.3.2/scaffolding.html#layouts
Chris
1
@Sebastialonso Ich habe gerade die veraltete Abhängigkeit behoben, danke, dass Sie das Problem gemeldet haben
Flavien Volken
Dies funktioniert nicht, wenn Sie eine Spalte zentrieren möchten. Verwenden Sie zum Zentrieren der Rasterspalte col-*offset-*. zum Beispiel <div class="col-10 offset-1">oder<div class="col-8 offset-2">
sgon00
47

Update 2019 - Bootstrap 4

"Zentrierter Inhalt" kann viele verschiedene Dinge bedeuten, und die Bootstrap-Zentrierung hat sich seit dem ursprünglichen Beitrag stark verändert.

Horizontale Mitte

Bootstrap 3

  • text-centerwird für display:inlineElemente verwendet
  • center-block zum Zentrum display:block Elemente
  • col-*offset-* Rasterspalten zentrieren
  • Sehen Sie sich diese Antwort an, um die Navigationsleiste zu zentrieren

Demo Bootstrap 3 Horizontale Zentrierung

Bootstrap 4

  • 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
  • justify-content-centerin rowkann auch zum Zentrieren verwendet werdencol-*

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


Vertikales Zentrum

Nun , da Bootstrap 4 FlexBox standardmäßig gibt es viele verschiedene Ansätze für die vertikale Ausrichtung unter Verwendung von : Auto-Margen , FlexBox utils oder die Anzeige utils zusammen mit vertikalen align utils . Auf den ersten Blick scheint "Vertical Align Utils" offensichtlich, aber diese funktionieren nur mit Inline- und Tabellenanzeigeelementen. Hier sind einige vertikale Zentrierungsoptionen für Bootstrap 4 aufgeführt.


1 - Vertikale Mitte mit automatischen Rändern:

Eine andere Möglichkeit, vertikal zu zentrieren, ist die Verwendung my-auto. Dadurch wird das Element in seinem Container zentriert. Zum Beispiel h-100macht die Zeile die volle Höhe und my-autozentriert die col-sm-12Spalte 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 Auto Margins Demo

my-auto stellt Ränder auf der vertikalen y-Achse dar und entspricht:

margin-top: auto;
margin-bottom: auto;

2 - Vertikales Zentrum mit Flexbox:

vertikale mittlere Gitterspalten

Da Bootstrap 4 .rowjetzt ist display:flex, können Sie es einfach align-self-centerfü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-centerinsgesamt .row, um alle col-*in der Reihe vertikal zu zentrieren ...

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

Demo für Spalten mit vertikaler Mitte und unterschiedlicher Höhe


3 - Vertikales Zentrum mit Anzeige-Dienstprogrammen:

Bootstrap 4 weist Anzeige utils , die verwendet werden können für display:table, display:table-cell, display:inline, etc .. Diese können mit der verwendet werden , den vertikalen Ausrichtung utils auszurichten inline, inline-Block oder Tabellenzellenelementen.

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

Vertikales Zentrum mit Display Utils Demo

Zim
quelle
Bei Verwendung des Rasterlayouts stellte ich fest, dass nur die folgende Kombination von CSS ein Div innerhalb einer Spalte horizontal und vertikal ausrichtet, sodass die maximale Höhe der Spalte auch mit der größten Spalte in derselben Zeile übereinstimmt. .className-of-inner-div { display: inline-block; text-align: left; padding-top: 25%; padding-bottom: 20%; margin-top: auto; margin-bottom: auto; } .className-of-Grid-column { vertical-align:middle; text-align: center; }
user3188040
Vielen Dank. Dies löst mein Problem.
sgon00
Ich würde für jede Demo stimmen, wenn ich könnte. Sie sind großartig. :) Vielen Dank!
Pascal
36

Bootstrap 3.1.1 hat eine .center-blockKlasse zum Zentrieren von Divs. Siehe: http://getbootstrap.com/css/#helper-classes-center .

Inhaltsblöcke zentrieren Setzen Sie ein Element auf display: blockund zentrieren Sie über margin. Erhältlich als Mixin und Klasse.

<div class="center-block">...</div>

Oder verwenden Sie, wie andere bereits gesagt haben, die .text-centerKlasse, um Text zu zentrieren.

cornishninja
quelle
29

Der beste Weg, dies zu tun, besteht darin, einen CSS-Stil zu definieren:

.centered-text {
    text-align:center
}    

Wo immer Sie zentrierten Text benötigen, fügen Sie ihn folgendermaßen 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 zentrieren 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.

Tomwolber
quelle
Gut, ich habe dies verwendet, um die Schaltflächen in einer Bootstrap Modal-Fußzeile zu zentrieren.
Riesen Elk
13

Die Klasse .show-grid wendet im Beispiel im Link mittig ausgerichteten Text an.

Sie können jederzeit style="text-align:center"zu Ihrer Zeile div oder einer anderen Klasse hinzufügen , denke ich.

PAULDAWG
quelle
4
Das Hinzufügen von Inline-Stilen wie diesen wird oft als schlechte Praxis angesehen
Spencer Williams
2
Ich stimme zu, und deshalb habe ich auch "oder eine andere Klasse" gesagt :)
PAULDAWG
12

Ab Februar 2013 füge ich in einigen Fällen der "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 die span * divs nach links verschoben werden und die Zentrierungstechnik "Auto Margin" nur funktioniert, wenn das div nicht verschoben wird.

Demo (auf JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/

bjfletcher
quelle
3
Dies ist die beste Antwort, da das Div zentriert ist und immer noch reagiert. Hier ist eine Geige für die Demo. Der in der Antwort funktioniert nicht: jsfiddle.net/r7Qgn/6
Rafi
9

Wenn Sie Bootstrap 3 verwenden, verfügt es auch über 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 das Beispiel in jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/

Stanley Wang
quelle
8

Bootstrap 2.3 hat eine text-centerKlasse.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
leonbloy
quelle
Nein, das funktioniert nur für Text, die Frage
betrifft den Hauptcontainer
"Die Frage
bezieht sich auf den Hauptcontainer
5

Auf meiner Seite definiere ich neue CSSStile, die sofort einsatzbereit 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 es eine gute Idee? Gibt es dafür eine gute Praxis?

Parisiam
quelle
3
rutschiger Hang. CSS soll Styling-Bedenken aus der Dokumentstruktur entfernen. Diese fügen sie, wenn auch indirekt, wieder hinzu. Vielleicht gibt TBS ein schlechtes Beispiel mit ihren span12s und dergleichen
willscripted
Ich stimme dem Kommentar zum rutschigen Hang zu. Ich möchte auch hinzufügen, dass die Verwendung von Twitter Bootstrap selbst wohl ein rutschiger Hang ist.
Jason Swett
4

Wenn Sie Bootstrap 2.0+ verwenden

Dadurch kann das Div auf der Seite zentriert werden.

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>
Sandeep
quelle
11
Dadurch wird das Element nicht zentriert. Die obere linke Ecke des Elements wird auf 4 Spalten nach vorne verschoben. Zentrieren bedeutet, die exakte Mitte des Elements auf die Mitte des Containerelements zu setzen.
Cagatay Kalan
3

Jede Textausrichtungs-Dienstprogrammklasse würde den Trick tun. Bootstrap verwendet seit .text-centerlanger Zeit eine Klasse zum Zentrieren von Text.

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

Oder Sie können Ihre eigenen 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; }
nathanjessen
quelle
3
Kein gutes Design, da Pull-Left und Pull-Right das Element der Klasse beeinflussen. Das von Ihnen definierte Pull-Center wirkt sich auf die untergeordneten Elemente des Elements aus.
Cagatay Kalan
3

Sie müssen sich mit dem einstellen .span.

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>
Praveen Das - PD
quelle
2

Meine bevorzugte Methode zum Zentrieren von Informationsblöcken unter Beibehaltung der Reaktionsfähigkeit (Kompatibilität mit Mobilgeräten) besteht darin, zwei leere span1Divs 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-->
Kilizo
quelle
2

Ab Bootstrap Version 3.1.1 ist die Hilfsklasse die beste Klasse zum Zentrieren des Inhalts .center-block.

Shwan Namiq
quelle
Ja, es ist Wright jetzt sehr Themen und Benutzer verwenden Bootstrap-Versionen größer als 3.1.1
SAFEEN 1990
1
<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.

Talha
quelle
Sie haben eine centeredKlasse in Ihrem Code, die viel Verwirrung
stiften wird
interessanter Ansatz, aber für mein spezielles Webform-CSS war dies eine gute Option.
JoshYates1980
1

Der Mittelblock ist auch eine Option, auf die in den obigen Antworten nicht Bezug genommen wird

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

Die Klasse center-blockteilt dem Element lediglich mit, dass es einen Rand von 0 auto haben soll, wobei auto der linke / rechte Rand ist. Es sei denn, die Klasse text-center oder css text-align: center; Wenn das Element auf dem übergeordneten Element festgelegt ist, kennt es den Punkt nicht, von dem aus diese automatische Berechnung berechnet werden soll, sodass es sich nicht wie erwartet zentriert.

Text-Center ist also eine bessere Option.

Schwarze Mamba
quelle
1

Sie können einen der folgenden Typen verwenden

  1. Verwenden Sie die vorhandene Bootstrap-Klasse text-center.
  2. Hinzufügen eines benutzerdefinierten Stils , style = "text-align:center".
  3. Verwenden Sie einen Spaltenversatz:

    Beispiel: <div class="col-md-offset-6 col-md-12"></div>

Poorna Rao
quelle
0

Ich habe diese Klasse erstellt, um die Zentrierung unabhängig von der Bildschirmgröße beizubehalten und gleichzeitig die Reaktionsfunktionen beizubehalten:

.container {
    alignment-adjust: central;
}
Ariel
quelle
0

Verwenden Sie einfach eine Klasse, ein Textzentrum, für das Div oder Tag, das Sie möchten. Ich denke, es könnte gut funktionieren. Es ist eine Bootstrap-Klasse für das Textausrichtungszentrum.

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>
Shiva Krishna
quelle
0

Ich habe zwei Möglichkeiten ausprobiert, und es hat gut funktioniert, die Div zu zentrieren. In beiden Fällen werden die Divs auf allen Bildschirmen ausgerichtet.

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

Weg 2: Offset 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:

Geben Sie hier die Bildbeschreibung ein

Erläuterung

Bootstrap bezeichnet links die erste Spalte der angegebenen Bildschirmbelegung. Wenn wir Offset oder Push verwenden, wird die Spalte "this" um "diese" vielen Spalten verschoben. Obwohl ich einige Probleme mit der Reaktionsfähigkeit des Offsets hatte, war der Push fantastisch.

Pikesh Prasoon
quelle