Comment centrer un div avec Bootstrap2 ?

Question

http://twitter.github.com/bootstrap/scaffolding.html

J'ai essayé toutes les combinaisons possibles :

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

o

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

changé les numéros d'envergure et d'offset...

Mais je n'arrive pas à centrer parfaitement une simple boîte sur une page :(

Je veux juste une boîte de 6 colonnes centrée...

---

éditer :

l'a fait avec

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

Mais la boîte est trop large, y a-t-il un moyen de le faire avec span7 ?

span7 offset2 donne un rembourrage supplémentaire à gauche span7 offset3 un rembourrage supplémentaire à droite...

Answer 1

Les travées de Bootstrap sont flottantes vers la gauche. Pour les centrer, il suffit d'outrepasser ce comportement. Je le fais en ajoutant ceci à ma feuille de style :

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

Si vous avez défini cette classe, il suffit de l'ajouter au span et tout est prêt.

<div class="span7 center"> box </div>

Notez que cette classe de centre personnalisée doit être définie après le css de bootstrap. Vous pouvez utiliser !important mais ce n'est pas recommandé.

Answer 2

En plus de réduire la div elle-même à la taille que vous voulez, en réduisant la taille de l'espace comme ceci... class="span6 offset3" , class="span4 offset4" etc... quelque chose d'aussi simple que style="text-align: center" sur le div pourrait avoir l'effet que vous recherchez.

vous ne pouvez pas utiliser span7 avec un décalage quelconque et obtenir la span centrée sur la page (parce que le total des spans = 12)

Answer 3

Si vous souhaitez opter pour une mise en page complète (et non pour une mise en page automatique à gauche et à droite), vous avez besoin d'un modèle qui s'adapte à 12 colonnes, c'est-à-dire 2 blancs, 8 contenus, 2 blancs. C'est ce que cette configuration fera. Elle ne couvre que le -md- les variantes, j'ai tendance à les ramener à la taille réelle pour les petits en ajoutant col-xs-12

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

Answer 4

Il semble que vous vouliez simplement centrer un seul conteneur. Le framework bootstrap complique peut-être trop cet exemple, vous auriez pu simplement avoir un div autonome avec votre propre style, quelque chose comme ça :

<div class="login-container">
  <!-- Your Login Form -->
</div>

et le style :

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

Cela devrait fonctionner correctement si vous êtes imbriqué quelque part dans un bootstrap. .container div.

Answer 5

Ajouter la classe centercontents

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}