Comment obtenir du contenu centré avec Twitter Bootstrap?
J'essaie de suivre un exemple très basique. En utilisant la page starter et le système de grille , 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 mal?
Ceci est pour le centrage de texte (c'est le sujet de la question)
Pour d'autres types de contenu, voir Réponse de Flavien .
Mise à jour: Bootstrap 2.3.0+ Réponse
La réponse originale était pour une première version de bootstrap. Depuis bootstrap 2.3.0, vous pouvez simplement donner à la div la classe .text-center.
Réponse originale (antérieure à 2.3.0)
Vous devez définir l'une des deux classes, row ou span12 avec un text-align: center. Voir http://jsfiddle.net/xKSUH/ ou http://jsfiddle.net/xKSUH/1/
NOTE: c'était retiré dans Bootstrap 3 .
Avant l’amorçage 3, vous pourriez utiliser la classe CSS pagination-centered comme ceci:
<div class="span12 pagination-centered">
Centered content.
</div>
La classe pagination-centered est déjà dans bootstrap.css (ou bootstrap.min.css) et contient la seule règle:
.pagination-centered{text-align:center;}
Avec Bootstrap 2.3.0. utilisez simplement la classe text-center
Je suppose que la plupart des gens ici cherchent en fait le moyen de centrer l’ensemble div et pas seulement le contenu du texte (ce qui est trivial…).
La deuxième façon (au lieu d'utiliser text-align: center) de centrer des éléments en HTML consiste à avoir un élément de largeur fixe et de marge automatique (gauche et droite). Avec Bootstrap, le style définissant les marges automatiques est la classe "conteneur".
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
Jetez un coup d'oeil ici pour un violon: http://jsfiddle.net/D2RLR/7788/
Bootstrap 3.1.1 a une classe .center-block pour centrer les divs. Voir: http://getbootstrap.com/css/#helper-classes-center .
Centrer les blocs de contenu Définissez un élément sur
display: blocket centrez-le viamargin. Disponible en mixin et en classe.
<div class="center-block">...</div>
Ou, comme d’autres l’ont déjà dit, utilisez la classe .text-center pour centrer le texte.
La meilleure façon de faire est de définir un style css:
.centered-text {
text-align:center
}
Ensuite, là où 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 juste 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>
Le moins de css en ligne que vous utilisez le mieux.
À partir de février 2013, dans certains cas, j'ai ajouté une classe "centrée" à la div "span":
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
et à CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
La raison en est que les span * div sont flottées à gauche et que la technique de centrage "marge automatique" ne fonctionne que si la div n'est pas flottante.
Démo (sur JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/
JSFiddle: http://jsfiddle.net/5RpSh/8/
La classe .show-grid applique un texte centré dans l'exemple du lien.
Vous pouvez toujours ajouter style="text-align:center" à votre ligne div ou à une autre classe, je pense.
Si vous utilisez Bootstrap 3, il possède également une classe CSS intégrée appelée .text-center. C'est ce que tu veux.
<div class="text-left">
left
</div>
<div class="text-center">
center
</div>
<div class="text-right">
right
</div>
S'il vous plaît voir l'exemple dans jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/
Bootstrap 2.3 a une classe text-center.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
De mon côté, je définis de nouveaux styles CSS prêts à l'emploi et faciles à mémoriser:
.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;}
Est-ce que c'est une bonne idée? Y at-il une bonne pratique pour cela?
Si vous utilisez Bootstrap 2.0+
Cela peut rendre la division centrée sur la page.
<div class="row">
<div class="span4 offset4">
//your content here gets centered of the page
</div>
</div>
Toute classe d’utilitaire d’alignement de texte ferait l'affaire. Bootstrap utilise depuis longtemps la classe .text-center pour centrer du texte.
.text-center { text-align: center !important; }
Ou vous pouvez créer vos propres utilitaires. Quelques variations que j'ai vues au fil des ans:
.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
Vous devez ajuster avec le .span.
Exemple:
<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>
Ma méthode préférée pour centrer des blocs d'informations tout en maintenant la réactivité (compatibilité mobile) consiste à placer deux divs span1 vides avant et après le contenu à centrer.
<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-->
Pour Bootstrap version 3.1.1 et ultérieure, la meilleure classe pour centrer le contenu est la classe d'assistance .center-block.
Vous pouvez utiliser l'un des types ci-dessous
- Utilisez la classe existante Bootstrap
text-center. - Ajout d'un style personnalisé,
style = "text-align:center". Utilisez un décalage de colonne:
Exemple:
<div class="col-md-offset-6 col-md-12"></div>
Le bloc central est également une option non mentionnée dans les réponses ci-dessus.
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
Tout ce que la classe center-block fait, c'est d'indiquer à l'élément d'avoir une marge de 0 auto, l'auto étant la marge gauche/droite. Cependant, à moins que la classe text-center ou css text-align: center; est défini sur le parent, l'élément ne connaît pas le point de calculer ce calcul automatique, il ne se centrera donc pas comme prévu.
Le centre de texte est donc une meilleure 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>
N'utilisez pas de liquide de conteneur dans la conduite principale.
Utilisez simplement une classe, text-center, pour la div ou la balise souhaitée. Je pense que cela peut fonctionner correctement. C'est une classe Bootstrap pour aligner le texte du centre.
Voici quelques classes Bootstrap d'alignement de texte:
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>
J'ai essayé de deux façons, et cela a bien fonctionné pour centrer la div. Les deux méthodes aligneront les divs sur tous les écrans.
Voie 1: En utilisant 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>
Voie 2: Utilisation du décalage:
<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>
Résultat:
Explication
Bootstrap désignera à gauche la première colonne de l’occupation d’écran spécifiée. Si nous utilisons offset ou Push, cela décale la colonne 'this' de 'ces' nombreuses colonnes. Bien que j'ai rencontré quelques problèmes de réactivité de l'offset, Push était génial.
Mise à jour 2018:
Dans Bootstrap 4.1.3 , le contenu peut être centré à l'aide de la classe mx-auto.
<div class="mx-auto">
Centered element
</div>
Référence: https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering
J'ai créé cette classe pour garder le centre, quelle que soit la taille de l'écran, tout en conservant des fonctionnalités réactives:
.container {
alignment-adjust: central;
}