Comment obtenez-vous centré sur le contenu en utilisant Twitter bootstrap?

Question

Je suis en train de suivre un exemple très simple. À l'aide de la page de démarrage et le système de grille, j'ai été en espérant que le suivant:

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

...serait de produire le texte centré.

Cependant, il apparaît encore sur l'extrême gauche. Ce que je fais mal?

Answer 1

C'est pour le Texte de Centrage (qui est ce que la question était de savoir)

Pour d'autres types de contenu, voir Flavien réponse.

Mise À Jour: Bootstrap 2.3.0+ Répondre

L'original de la réplique a été pour la première version de bootstrap. Comme bootstrap 2.3.0, vous pouvez simplement utiliser la classe .text-center.

---

Origine de la Réponse (pré 2.3.0)

Vous avez besoin de définir l'un des deux classes, row ou span12 avec un text-align: center. Voir http://jsfiddle.net/xKSUH/ ou http://jsfiddle.net/xKSUH/1/

Answer 2

REMARQUE: il a été enlevé dans le Bootstrap 3.

---

Pré-Bootstrap 3, vous pouvez utiliser la classe CSS pagination-centered comme ceci:

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

Classe pagination-centered est déjà dans le bootstrap.css (ou bootstrap.min.css) et a une seule règle:

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

Avec Bootstrap 2.3.0. suffit d'utiliser la classe text-center

Answer 3

Je suppose que la plupart des gens ici sont en fait la recherche de la façon de centre de l'ensemble de l' div , et pas seulement le contenu du texte (ce qui est trivial...).

La seconde manière (au lieu d'utiliser text-align:center) centre des choses dans le html est d'avoir un élément avec une largeur fixe et automatique de la marge (gauche et droite). Avec bootstrap, le style de la définition automatique des marges est le "contenant" de la classe.

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

Jetez un oeil ici pour violon: http://jsfiddle.net/D2RLR/2971/

Answer 4

Bootstrap 3.1.1 a un .center-block classe pour le centrage de la vrd. Voir: http://getbootstrap.com/css/#helper-classes-center.

Le contenu du centre de blocs de Définir un élément d' display: block et center via margin. Disponible comme un mixin et de la classe.

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

Ou, comme d'autres l'ont déjà dit, l'utilisation de l' .text-center classe de centre de texte.

Answer 5

La meilleure façon de le faire est de définir une feuille de style css:

.centered-text {
    text-align:center
}    

Alors où vous en avez besoin centrée sur le texte que vous l'ajouter comme suit:

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

ou si vous voulez juste la balise p centrée:

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

Le moins css vous utilisez le mieux.