web-dev-qa-db-fra.com

Comment centrer une div avec Bootstrap2?

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

J'ai essayé comme toutes les combinaisons:

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

ou 

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

modification de la plage et du décalage ...

Mais je ne peux pas obtenir une simple boîte parfaitement centrée sur une page :(

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

modifier:

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, est-ce que je peux le faire avec span7?

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

csstwitter-bootstraptwitter-bootstrap-2
83
Alex

en plus de réduire la taille du div lui-même à la taille que vous souhaitez, en réduisant la taille de la plage, comme ceci ... class="span6 offset3", class="span4 offset4", etc ... quelque chose d'aussi simple que style="text-align: center" sur le div aurait pu l'effet que vous recherchez

vous ne pouvez pas utiliser span7 avec n'importe quel décalage défini et centrer la portée sur la page (car le total des plages = 12)

45
csturtz

Les portées de Bootstrap sont flottées à gauche. Tout ce qu'il faut pour les centrer est de remplacer 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, ajoutez-la simplement à la durée et vous êtes prêt à partir.

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

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

165
Zuhaib Ali

Bootstrap3 a la classe .center-block que vous pouvez utiliser. Il est défini comme

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Documentation ici .

35
Casey

Si vous voulez utiliser une configuration d’amorçage complète (et non de manière automatique gauche/droite), vous avez besoin d’un modèle qui tiendra dans 12 colonnes, par exemple. 2 blancs, 8 contenus, 2 blancs. C’est ce que cette configuration fera . Elle ne couvre que les variantes -md- , j’ai tendance à la faire glisser en taille réelle pour plus petite en ajoutant col-xs-12

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

On dirait que vous voulez juste aligner un seul conteneur au centre . Le framework bootstrap peut compliquer un peu cet exemple, vous auriez pu avoir une div autonome avec votre propre style, quelque chose comme:

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

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

8
cstrat

ajouter la classe centercontents

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

Suivez ces instructions https://getbootstrap.com/docs/3.3/css/

Utilisez .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
0
core114

Le code @ZuhaibAli fonctionne plutôt bien pour moi, mais je l'ai un peu modifié: 

J'ai créé une nouvelle classe en css 

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

alors le div devient 

<div class="center col-md-6"></div>

J'ai ajouté col-md-6 pour la largeur de la div elle-même, ce qui signifiait que la div était deux fois plus petite, il y a 1 à 12 col md dans le bootstrap. 

0
jakson