Comment centrer un div avec Bootstrap2?

84

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


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

span7 offset2donne un rembourrage supplémentaire à gauche, span7 offset3un rembourrage supplémentaire à droite ...

Alex
la source
Cherchez-vous à centrer une boîte horizontalement sur la page? Parce que la containerclasse le fait déjà, j'ai pensé que vous cherchiez peut-être à centrer une boîte plus petite. Ou cherchez-vous à centrer une boîte à la fois horizontalement et verticalement sur la page?
Andres Ilich
14
un truc de boîte que vous dites? . . . .ici dans le monde des développeurs, nous appelons cela un div
pythonian29033
Quelle version de Bootstrap utilisiez-vous? cela devrait être reflété dans le titre car les personnes qui recherchent ceci finiront ici et verront du code obsolète.
JGallardo

Réponses:

46

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)

csturtz
la source
12
Considérez la réponse de Zuhaib Ali. text-align: center ne fonctionne pas pour centrer les éléments dans un <div>. La classe offset * n'est pas vraiment des composants de centrage. Il crée simplement l'illusion du centrage. Vous pouvez le vérifier en redimensionnant la fenêtre et en vérifiant que les composants ne restent pas centrés. Lorsque vous appliquez la méthode de Zuhaib Ali, les composants restent centrés.
BigSauce
Au lieu d'ajouter un style en ligne (style = "text-align: center"), ajoutez la classe "center-block" et obtenez le contenu centré dans votre div centré.
Shawn Taylor
col-md-4 ou col-lg-4 est égal à une marge: 0 auto; ?
jruzafa
165

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

Zuhaib Ali
la source
5
OUI! Merci, Zuhaib! A parfaitement fonctionné. Cette réponse doit être votée comme la bonne réponse à cette question.
BigSauce
@ZuhaibAli L'ajout float: none;corrige mon problème.
SIFE
1
J'utilise Rails, donc je veux juste souligner que dans application.css, ajoutez *= require bootstrap.min avant *= require_self et*= require_tree
2
Cela n'a pas fonctionné pour moi, mais l'ajout a display: tablesemblé résoudre le problème
Peter Berg
1
Très bonne réponse! Travailler avec cela à partir de maintenant.
serv-bot 22
34

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 .

Casey
la source
20

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>
Craig
la source
est-ce un moyen valable de centrer les divs dans boostrap?
Gavindra Kalikapersaud
1
Le contenu du div n'est pas centré, mais le div lui-même l'est.
Craig
8

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 .

cstrat
la source
3

ajouter le centre de classe

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

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.

Jakson
la source
0

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>
Mahmoud Farahat
la source