Comment centrer un 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 des numéros de portée et de 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 ...

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 offset2donne un rembourrage supplémentaire à gauche, span7 offset3un rembourrage supplémentaire à droite ...

en plus le rétrécissement div lui - même à la taille souhaitée, en réduisant la taille de portée comme si ... class="span6 offset3", class="span4 offset4", etc ... quelque chose d' aussi simple que style="text-align: center"sur la div pourrait avoir pour effet que vous recherchez

vous ne pouvez pas utiliser span7 avec un décalage défini et obtenir le span centré sur la page (car total spans = 12)

Les travées de Bootstrap flottent vers la gauche. Tout ce qu'il faut pour les centrer est d'annuler ce comportement. Je fais cela 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 à l'étendue et vous êtes prêt à partir.

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

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

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

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

Documentation ici .

Si vous voulez faire un bootstrap complet (et pas la 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 fera cette configuration. Il ne couvre que les variantes -md- , j'ai tendance à le prendre en 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>

On dirait que vous vouliez juste aligner au centre un seul conteneur. Le framework bootstrap est peut-être trop compliqué pour cet exemple, vous auriez pu juste avoir un 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 une .containerdiv bootstrap .

ajouter le centre de classe

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

Le code @ZuhaibAli fonctionne pour moi mais je l'ai un peu changé:

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 du div lui-même, ce qui dans cette situation signifiait que le div était la moitié de la taille, il y a 1 -12 col md dans bootstrap.

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

Utilisation .center-block

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

envelopper le div dans un div parent avec la classe rowpuis ajouter du style margin:0 auto;au div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>