Comment obtenir un contenu centré en utilisant Twitter Bootstrap?

J'essaie de suivre un exemple très basique. En utilisant la page de démarrage 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?

C'est pour le centrage du texte ( qui était le sujet de la question )

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

Mise à jour: Bootstrap 2.3.0+ Answer

La réponse originale était pour une première version de bootstrap. Depuis le bootstrap 2.3.0, vous pouvez simplement donner à la div la classe.text-center .

Réponse originale (avant 2.3.0)

Vous devez définir l'une des deux classes, rowou span12avec un text-align: center. Voir http://jsfiddle.net/xKSUH/ ou http://jsfiddle.net/xKSUH/1/

REMARQUE: cela a été supprimé dans Bootstrap 3 .

Pre-Bootstrap 3, vous pouvez utiliser la classe CSS pagination-centeredcomme ceci:

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

La classe pagination-centeredest déjà dans bootstrap.css (ou bootstrap.min.css) et a la seule règle:

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

Avec Bootstrap 2.3.0. il suffit d'utiliser la classetext-center

Je suppose que la plupart des gens ici recherchent réellement le moyen de centrer le toutdiv et pas seulement le contenu du texte (ce qui est trivial…).

La deuxième façon (au lieu d'utiliser text-align: center) pour centrer les choses en HTML est d'avoir un élément avec une largeur fixe et une marge automatique (gauche et droite). Avec Bootstrap, le style définissant les marges automatiques est la classe "container".

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

Jetez un œil ici pour un violon: http://jsfiddle.net/D2RLR/7788/

Mise à jour 2019 - Bootstrap 4

Le "contenu centré" peut signifier beaucoup de choses différentes, et le centrage Bootstrap a beaucoup changé depuis la publication d'origine.

Centre horizontal

Bootstrap 3

• text-centerest utilisé pour les display:inlineéléments
• center-blockpour centrer les display:blockéléments
• col-*offset-* pour centrer les colonnes de la grille
• voir cette réponse pour centrer la barre de navigation

Demo Bootstrap 3 Centrage horizontal

Bootstrap 4

• text-centerest toujours utilisé pour les display:inlineéléments
• mx-autoremplace center-blockpour centrer les display:blockéléments
• offset-* ou mx-auto peut être utilisé pour centrer les colonnes de la grille
• justify-content-centeren rowpeut également être utilisé pour centrercol-*

mx-auto(marges automatique d'axe x) se concentreront display:blockou des display:flexéléments qui ont une largeur définie , ( %, vw, px, etc ..). Flexbox est utilisé par défaut sur les colonnes de la grille, il existe donc également différentes méthodes de centrage de Flexbox.

Demo Bootstrap 4 Centrage horizontal

Centre vertical

Maintenant que Bootstrap 4 est flexbox par défaut, il existe de nombreuses approches différentes de l'alignement vertical utilisant: les marges automatiques , les utilitaires flexbox ou les utilitaires d' affichage avec les utilitaires d'alignement vertical . Au début, les "utils d'alignement vertical" semblent évidents, mais ils ne fonctionnent qu'avec des éléments d'affichage en ligne et de table. Voici quelques options de centrage vertical Bootstrap 4.

1 - Centre vertical à l'aide des marges automatiques:

Une autre façon de centrer verticalement est d'utiliser my-auto. Cela centrera l'élément dans son conteneur. Par exemple, h-100rend la ligne pleine hauteur et my-autocentre verticalement la col-sm-12colonne.

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

Centre vertical à l'aide de la démonstration des marges automatiques

my-auto représente les marges sur l'axe vertical y et équivaut à:

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

2 - Centre vertical avec Flexbox:

Puisque Bootstrap 4 .rowest maintenant, display:flexvous pouvez simplement l'utiliser align-self-centersur n'importe quelle colonne pour le centrer verticalement ...

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

ou, utilisez align-items-centersur l'ensemble .rowpour aligner verticalement au centre tout col-*dans la rangée ...

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

Démonstration de colonnes verticales de différentes hauteurs

3 - Centre vertical utilisant des outils d'affichage:

Bootstrap 4 a utils d'affichage qui peuvent être utilisés pour display:table, display:table-cell, display:inline, etc .. Ils peuvent être utilisés avec les utils d'alignement vertical à roues alignées align, inline-block ou des éléments de cellules de tableau.

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

Vertical Center Using Display Utils Demo

Bootstrap 3.1.1 a une .center-blockclasse pour centrer les divs. Voir: http://getbootstrap.com/css/#helper-classes-center .

Centrer les blocs de contenu Définir un élément sur display: blocket centrer via margin. Disponible en mixin et en classe.

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

Ou, comme d'autres l'ont déjà dit, utilisez la .text-centerclasse pour centrer le texte.

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

.centered-text {
    text-align:center
}    

Ensuite, partout 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>

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

La classe .show-grid applique du 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.

Depuis février 2013, dans certains cas, j'ajoute 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 au CSS:

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

La raison en est que les span * div flottent vers la gauche et 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/

Si vous utilisez Bootstrap 3, il possède également une classe CSS intégrée nommé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>

Veuillez voir l'exemple dans jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/

Bootstrap 2.3 a une 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>

De mon côté je définis de nouveaux CSSstyles prêts à l'emploi et faciles à retenir:

.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? Existe-t-il une bonne pratique pour cela?

Si vous utilisez Bootstrap 2.0+

Cela peut rendre le div centré sur la page.

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

N'importe quelle classe utilitaire d'alignement de texte ferait l'affaire. Bootstrap utilise la .text-centerclasse pour centrer le texte depuis longtemps.

.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 régler avec .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 conservant la réactivité (compatibilité mobile) est de placer deux span1divs vides avant et après le contenu que vous souhaitez 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 supérieure, la meilleure classe pour centrer le contenu est la .center-blockclasse d'assistance.

<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 réservoir dans la principale.

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 fait la classe, center-blockc'est de dire à l'élément d'avoir une marge de 0 auto, l'auto étant les marges 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 départ de ce calcul automatique, il ne se centrera donc pas comme prévu.

Le centre de texte est donc une meilleure option.

Vous pouvez utiliser l'un des types ci-dessous

1. Utilisez la classe existante Bootstrap text-center.
2. Ajout d' un style personnalisé, style = "text-align:center".

3. Utilisez un décalage de colonne:

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

J'ai créé cette classe pour garder le centré indépendamment de la taille de l'écran tout en conservant des fonctionnalités réactives:

.container {
    alignment-adjust: central;
}

Utilisez simplement une classe, text-center, pour la div ou la balise que vous voulez. Je pense que cela peut bien fonctionner. Il s'agit d'une classe Bootstrap pour le centre d'alignement du texte.

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 façons aligneront les divs sur tous les écrans.

Méthode 1: Utilisation de 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>

Méthode 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, la colonne «this» sera décalée de «these» many columns. Bien que j'ai rencontré des problèmes de réactivité de l'offset, le 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