Wie erhalten Sie mit Twitter Bootstrap zentrierte Inhalte?

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?

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/

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

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/

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:

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

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.

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.

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.

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/

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/

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>

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?

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>

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

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>

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

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

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

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.

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>

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

.container {
    alignment-adjust: central;
}

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>

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:

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.

Update 2018:

In Bootstrap 4.1.3 kann der Inhalt mithilfe der Klasse zentriert werden mx-auto.

<div class="mx-auto">
  Centered element
</div>

Referenz: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering