Come si ottengono contenuti centrati utilizzando Twitter Bootstrap?

Sto cercando di seguire un esempio molto semplice. Utilizzando la pagina iniziale e il sistema a griglia , speravo che:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... produrrebbe un testo centrato.

Tuttavia, appare ancora all'estrema sinistra. Che cosa sto facendo di sbagliato?

Questo è per il centraggio del testo ( che è la domanda )

Per altri tipi di contenuti, vedere la risposta di Flavien .

Aggiornamento: Bootstrap 2.3.0+ Risposta

La risposta originale era per una versione iniziale di bootstrap. A partire da bootstrap 2.3.0, puoi semplicemente dare al div la classe.text-center .

Risposta originale (pre 2.3.0)

È necessario definire una delle due classi rowo span12con a text-align: center. Vedi http://jsfiddle.net/xKSUH/ o http://jsfiddle.net/xKSUH/1/

NOTA: questo è stato rimosso in Bootstrap 3 .

Pre-Bootstrap 3, è possibile utilizzare la classe CSS in pagination-centeredquesto modo:

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

La classe pagination-centeredè già in bootstrap.css (o bootstrap.min.css) e ha l'unica regola:

.pagination-centered{text-align:center;}

Con Bootstrap 2.3.0. basta usare la classetext-center

Immagino che la maggior parte delle persone qui stia effettivamente cercando il modo di centrare il tuttodiv e non solo il contenuto del testo (che è banale ...).

Il secondo modo (invece di usare text-align: center) per centrare le cose in HTML è avere un elemento con una larghezza fissa e un margine automatico (sinistro e destro). Con Bootstrap, lo stile che definisce i margini automatici è la classe "container".

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

Dai un'occhiata qui per un violino: http://jsfiddle.net/D2RLR/7788/

Aggiornamento 2019 - Bootstrap 4

"Contenuto centrato" può significare molte cose diverse e il centraggio di Bootstrap è cambiato molto dal post originale.

Centro orizzontale

Bootstrap 3

• text-centerè usato per gli display:inlineelementi
• center-blockcentrare gli display:blockelementi
• col-*offset-* centrare le colonne della griglia
• vedere questa risposta per centrare la barra di navigazione

Demo Bootstrap 3: centraggio orizzontale

Bootstrap 4

• text-centerè ancora usato per gli display:inlineelementi
• mx-autosostituisce gli elementi center-blockcentralidisplay:block
• offset-* o mx-auto può essere utilizzato per centrare le colonne della griglia
• justify-content-centerin rowpuò anche essere usato per centrarecol-*

mx-auto(margini auto asse x) si concentreranno display:blocko display:flexelementi che hanno una larghezza definita , ( %, vw, px, ecc ..). Flexbox viene utilizzato per impostazione predefinita nelle colonne della griglia, quindi esistono anche vari metodi di centraggio del flexbox.

Demo Bootstrap 4 Centratura orizzontale

Centro verticale

Ora che Bootstrap 4 è flexbox per impostazione predefinita, ci sono molti approcci diversi all'allineamento verticale usando: margini automatici , programmi di utilità flexbox o programmi di visualizzazione insieme a programmi di allineamento verticale . Inizialmente "utils di allineamento verticale" sembra ovvio, ma funzionano solo con elementi di visualizzazione inline e table. Ecco alcune opzioni di centraggio verticale Bootstrap 4.

1 - Centro verticale usando i margini automatici:

Un altro modo per centrare verticalmente è usare my-auto. Questo centrerà l'elemento all'interno del suo contenitore. Ad esempio, h-100rende la riga a tutta altezza e my-autocentrerà verticalmente la col-sm-12colonna.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Centro verticale usando la demo dei margini automatici

my-auto rappresenta i margini sull'asse y verticale ed equivale a:

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

2 - Centro verticale con Flexbox:

Poiché Bootstrap 4 .rowè ora display:flexpuoi semplicemente usare align-self-centersu qualsiasi colonna per centrarlo verticalmente ...

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

oppure, usa align-items-centertutto .rowper allineare verticalmente al centro tutto col-*nella riga ...

       <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 delle colonne di altezza diversa al centro verticale

3 - Centro verticale utilizzando gli strumenti di visualizzazione:

Bootstrap 4 ha utils visualizzazione che possono essere utilizzati per display:table, display:table-cell, display:inline, ecc .. Questi possono essere usati con i utils di allineamento verticale alla linea di allineamento, linea-blocco o elementi di cella di tabella.

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

Centro verticale con Demo Utilità display

Bootstrap 3.1.1 ha una .center-blockclasse per centrare div. Vedi: http://getbootstrap.com/css/#helper-classes-center .

Centra i blocchi di contenuto Imposta un elemento su display: blocke centra via margin. Disponibile come mixin e classe.

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

Oppure, come altri hanno già detto, usa la .text-centerclasse per centrare il testo.

Il modo migliore per farlo è definire uno stile css:

.centered-text {
    text-align:center
}    

Quindi, ovunque tu abbia bisogno di testo centrato, lo aggiungi in questo modo:

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

o se vuoi solo centrare il tag p:

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

Meno css inline usi meglio è.

La classe .show-grid applica il testo allineato al centro nell'esempio nel collegamento.

Puoi sempre aggiungere style="text-align:center"alla tua riga div o qualche altra classe che penso.

A partire da febbraio 2013, in alcuni casi, aggiungo una classe "centrata" al div "span":

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

e ai CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

Il motivo è dovuto al fatto che i div * span vengono spostati a sinistra e la tecnica di centraggio "auto margin" funziona solo se il div non viene float.

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

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

Se usi Bootstrap 3, ha anche una classe CSS integrata denominata .text-center . Questo è ciò che vuoi.

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

Vedi l'esempio in jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/

Bootstrap 2.3 ha una text-centerclasse.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Da parte mia definisco nuovi CSSstili pronti all'uso e facili da ricordare:

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

È una buona idea? C'è qualche buona pratica per questo?

Se si utilizza Bootstrap 2.0+

Questo può rendere il div centrato sulla pagina.

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

Qualsiasi classe di utilità di allineamento del testo farebbe il trucco. Bootstrap utilizza la .text-centerclasse per centrare il testo da molto tempo ormai.

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

Oppure puoi creare le tue utilità. Alcune variazioni che ho visto negli anni:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

È necessario regolare con .span.

Esempio:

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

Il mio metodo preferito per centrare blocchi di informazioni mantenendo la reattività (compatibilità mobile) consiste nel posizionare due span1div vuoti prima e dopo il contenuto che si desidera centrare.

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

Per Bootstrap versione 3.1.1 e successive, la classe migliore per centrare il contenuto è la .center-blockclasse helper.

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

Non utilizzare il contenitore-fluido nell'unità principale.

Il blocco centrale è anche un'opzione non indicata nelle risposte sopra

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

Tutto quello che center-blockfa la classe è dire all'elemento di avere un margine di 0 auto, l'auto è il margine sinistro / destro. Tuttavia, a meno che la classe text-center o css text-align: center; è impostato sul genitore, l'elemento non conosce il punto da cui calcolare questo calcolo automatico, quindi non si centrerà come previsto.

Quindi il text-center è un'opzione migliore.

Puoi usare uno dei seguenti tipi

1. Utilizzare la classe esistente Bootstrap text-center.
2. L'aggiunta di uno stile personalizzato, style = "text-align:center".

3. Usa un offset di colonna:

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

Ho creato questa classe per mantenere il centrato indipendentemente dalle dimensioni dello schermo mantenendo le funzionalità reattive:

.container {
    alignment-adjust: central;
}

Usa semplicemente una classe, un centro di testo, per il div o tag che desideri. Penso che potrebbe funzionare bene. È una classe Bootstrap per il centro di allineamento del testo.

Ecco alcune classi di Bootstrap per l'allineamento del testo:

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>

Ho provato in due modi, e ha funzionato benissimo per centrare il div. Entrambi i modi allineeranno i div su tutte le schermate.

Modo 1: Utilizzo di 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>

Modo 2: utilizzo dell'offset:

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

Risultato:

Spiegazione

Bootstrap designerà a sinistra, la prima colonna dell'occupazione dello schermo specificata. Se utilizziamo offset o push, la colonna "this" verrà spostata di "quelle" di molte colonne. Anche se ho affrontato alcuni problemi nella reattività dell'offset, la spinta è stata fantastica.

Aggiornamento 2018:

In Bootstrap 4.1.3 , il contenuto può essere centrato usando la classe mx-auto.

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

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