520 votes

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

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?

652voto

ScottS Points 37738

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/

239voto

Iurii.K Points 2483

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

147voto

Flavien Volken Points 2985

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/

35voto

cornishninja Points 85

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.

28voto

tomwolber Points 338

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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: