Comment obtenir un contenu centré en utilisant Twitter Bootstrap ?

J&#8217essaie de suivre un exemple très simple. En utilisant la [page de démarrage et le système de grille][1], j'espérais ce qui suit :

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

...produirait un texte centré.

Cependant, il apparaît toujours à l'extrême gauche. Qu'est-ce que je fais de mal ?

[1] : http://getbootstrap.com/css/#grid

Peter Mortensen
Question modifiée 28 octobre 2017 в 10:09
Programmation
html css twitter-bootstrap
7 février 2012 в 9:21
1 voir
Solution

Ceci est pour le centrage du texte (ce qui est le sujet de la question)

Pour les autres types de contenu, voir la réponse de Flavien.

Mise à jour : réponse à la question sur Bootstrap 2.3.0+.

La réponse originale concernait une version antérieure de Bootstrap. Depuis la version 2.3.0 de Bootstrap, vous pouvez simplement donner à la division la classe .text-center.

Réponse originale (avant 2.3.0)

Vous devez définir une des deux classes, row ou span12 avec un text-align : center. Voir http://jsfiddle.net/xKSUH/ ou http://jsfiddle.net/xKSUH/1/

Community
Réponse modifiée 23 mai 2017 в 11:55
Commentaires (9)

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

.centered-text {
    text-align:center
}

Puis, à chaque fois que vous avez besoin d'un texte centré, vous l'ajoutez 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 simplement que la balise p soit 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>

Moins vous utilisez de css en ligne, mieux c'est.

Flavien Volken
Réponse modifiée 27 décembre 2012 в 3:11
Commentaires (1)

La classe .show-grid applique un texte aligné au centre dans l'exemple du lien.

Vous pouvez toujours ajouter style="text-align:center" à votre div de ligne ou une autre classe, je pense.

Commentaires (2)