Comment obtenir le contenu centré en utilisant Twitter Bootstrap?

depuis février 2013, dans certains cas, j'ajoute une classe "centrée" à la div "portée":

<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 Div de span* sont flottés vers la gauche, et la technique de centrage" marge automatique " ne fonctionne que si le div n'est pas flotté.

Demo (on JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/

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

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

si vous utilisez Bootstrap 3, Il a aussi la classe CSS intégrée nommée .centre de texte . Qu'est ce que vous voulez.

<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 CSS styles prêts à l'emploi et facile à se rappeler:

.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 une bonne idée? Est-il une bonne pratique?

si vous utilisez Bootstrap 2.0+

cela peut rendre la div centrée à la page.

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

N'importe quelle classe utilitaire text-align ferait l'affaire. Bootstrap utilise depuis longtemps la classe .text-center pour centrer le texte.

.text-center { text-align: center !important; }

Ou vous pouvez créer vos propres factures. 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 vous 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'information tout en maintenant la réactivité (compatibilité mobile) est de placer deux vides span1 divs 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 classe helper .center-block .

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

Ne pas utiliser de récipient de liquide dans la main.

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>

l'Ensemble de la classe center-block ne est-à-dire l'élément à 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 ne soit définie sur le parent, l'élément ne sait pas de quel point effectuer ce calcul automatique, de sorte qu'il ne se centrera pas comme prévu.

ainsi texte-Centre est un une meilleure option.

vous pouvez utiliser l'un des types suivants ""

1. utilisez la classe Bootstrap existante text-center .
2. , en Ajoutant un style personnalisé, style = "text-align:center" .

3. utiliser une colonne offset:

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

j'ai créé cette classe pour garder le centré quelle que soit la taille de l'écran tout en maintenant les fonctionnalités responsive:

.container {
    alignment-adjust: central;
}

utilisez simplement une classe, un centre de texte, pour le div ou l'étiquette que vous voulez. Je pense qu'il peut fonctionner correctement. Il s'agit d'une classe Bootstrap pour text align center.

voici quelques classes D'alignement de texte Bootstrap:

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é deux façons, et il a fonctionné très bien pour centrer la div. Les deux façons aligneront les divs sur tous les écrans.

Voie 1: Utilisation De La Poussée:

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

Chemin 2: À L'Aide D'Offset:

<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 de l'écran spécifiée. Si nous utilisons offset ou push, il déplacera la colonne 'this' par 'those' de nombreuses colonnes. Bien que j'ai fait face à certains problèmes dans la réactivité de l'offset, push était génial.