Wie erhalten Sie zentrierte Inhalte mit Twitter Bootstrap?

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 über margin. 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.

Update 2018 - Bootstrap 4

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

Horizontales Zentrum

Bootstrap 3

• text-center wird für display:inline-Elemente verwendet
• center-block, um display:block-Elemente zu zentrieren
• col-*offset-* zum Zentrieren der Rasterspalten
• siehe diese Antwort um die Navbar zu zentrieren

Demo Bootstrap 3 Horizontale Zentrierung

Bootstrap 4

• text-center wird weiterhin für display:inline-Elemente verwendet
• mx-auto ersetzt center-block, um display:block-Elemente zu zentrieren
• offset-*odermx-auto kann zum Zentrieren von Rasterspalten verwendet werden
• justify-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

Vertikales Zentrum

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>

Vertikales Zentrum mit Display Utils Demo

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

1. Verwenden Sie die vorhandene Bootstrap-Klasse text-center.
2. Einen benutzerdefinierten Stil hinzufügen, style = "text-align:center".

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