Comment centrer une div avec bootstrap2?

Question

http://twitter.github.com/bootstrap/saffolding.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>

Numéros de portée et de décalage modifiés ...

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

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

---

Éditer:

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

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

Vous ne pouvez pas utiliser Span7 avec un décalage défini et obtenir la portée centrée sur la page (car total des étendues = 12)

Answer 2

Les portées de bootstrap sont flottées vers la gauche. Il suffit de les centrer, c'est de remplacer ce comportement. Je le fais en ajoutant cela à ma feuille de style:

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

Si vous avez défini ce cours, ajoutez-le simplement à la travée 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 pourriez utiliser !important Mais ce n'est pas recommandé.

Answer 3

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

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

Documentation ici.

Answer 4

Si vous voulez aller entièrement Bootstrap (et non à la gauche / à droite automatique), vous avez besoin d'un motif qui s'adaptera à 12 colonnes, par exemple 2 blancs, 8 contenu, 2 blancs. C'est ce que cette configuration fera. Il ne couvre que le -Maryland- Variantes, j'ai tendance à le mettre en pleine taille pour petit en ajoutant Col-XS-12

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

Answer 5

On dirait que vous vouliez juste centrer un seul conteneur. Le framework Bootstrap pourrait être complicité sur 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 bien si vous êtes imbriqué quelque part dans un bootstrap .container Div.

Answer 6

Ajouter la classe centrale

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

Answer 7

@Zuhaibali Code fonctionne pour moi mais je l'ai changé un peu:

J'ai créé une nouvelle classe dans CSS

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

Puis la div devient

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

J'ai ajouté Col-MD-6 pour la largeur de la div elle-même qui, dans cette situation, signifiait que la div est la moitié de la taille, il y a 1 -12 Col MD dans bootstrap.

Answer 8

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

Utilisation .center-block

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