Comment puis-je centre un Bootstrap div avec un "spanX" classe?

Question

J'utilise bootstrap et essaie de centrer une div(span7) comme ça:

<div class="row-fluid">
    <div id="main" class="span7">
        Lorem ipsum dolor sit amet
    </div>
</div>

mon code css est:

#main{
    margin:0px auto;
}

Mais il n'est pas fixée au centre. Comment puis-je définir centre?

Answer 1

De Twitter bootstrap .span des classes sont flottaient à gauche, de sorte qu'ils ne seront pas du centre par les moyens habituels. Donc, si vous voulez que le centre de votre span simplement ajouter float:none votre #main règle.

CSS

#main {
 margin:0 auto;
 float:none;
}

Answer 2

Par ailleurs, si votre span classe est paire (par exemple, span8) vous pouvez ajouter un offset classe de centre de celui – ci-pour span8 qui serait offset2 (en supposant que la valeur par défaut 12-grille de colonne), pour span6 il serait offset3 et ainsi de suite (en gros, la moitié du nombre de colonnes restantes si vous soustrayez l' span-nombre du nombre total de colonnes dans la grille).

Mise à JOUR Bootstrap 3 renommé beaucoup de classes , et donc tous les span*les classes doivent être col-md-* et de la offset les classes doivent être col-md-offset-*, en supposant que vous êtes en utilisant les moyennes de la grille souple.

J'ai créé une rapide démonstration ici, espérons que cela aide: http://codepen.io/anon/pen/BEyHd.

Answer 3

Si quelqu'un veut la vraie solution pour le centrage à la FOIS des images et du texte dans une plage à l'aide de bootstrap de la ligne de liquide, c'est ici (comment mettre en œuvre et explication suit mon exemple):

css

div.row-fluid [class*="span"] .center-in-span { 
   float: none; 
   margin: 0 auto; 
   text-align: center; 
   display: block; 
   width: auto; 
   height: auto;
}

html

<div class="row-fluid">
   <div class="span12">
      <img class="center-in-span" alt="MyExample" src="/path/to/example.jpg"/>
   </div>
</div>

<div class="row-fluid">
   <div class="span12">
      <p class="center-in-span">this is text</p>
   </div>
</div>

UTILISATION: Pour utiliser cette css pour centrer une image dans une plage, il suffit d'appliquer la .centre-in-span class de l'élément img, comme indiqué ci-dessus.

Pour utiliser cette css pour centrer le texte dans une plage, il suffit d'appliquer la .centre-in-span class de l'élément p, comme indiqué ci-dessus.

EXPLICATION: Cette css fonctionne parce que nous sommes primordial spécifiques bootstrap style. Les différences notables avec les autres réponses qui ont été affichés sont que la largeur et la hauteur sont définies à l'auto, de sorte que vous n'avez pas à utiliser un fixe avec (bon pour une dynamique de la page web). en outre, la combinaison de réglage de la marge pour auto, text-align:center et display:block, prend en charge à la fois des images et des paragraphes.

Permettez-moi de savoir si c'est suffisamment détaillée pour la mise en œuvre facile.

Answer 4

Mise à jour

Comme de BS3 il y a un .center-block de la classe helper. À partir de la documentation:

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

// Usage as mixins
.element {
  .center-block();
}

Il est caché à la complexité de ce problème apparemment simple. Toutes les réponses ont des problèmes.

1. Créer une Classe Personnalisée (Grands Gotcha)

Créer .col-centred classe, mais il ya une grande chose à corriger.

.col-centred {
   float: none !important;
   margin: 0 auto;
}

<!-- Bootstrap 3 -->
<div class="col-lg-6 col-centred">
  Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 col-centred">
  Centred content.
</div>

Gotcha

Bootstrap nécessite des colonnes d'ajouter jusqu'à 12. S'ils ne le font pas ils vont se chevaucher, ce qui est un problème. Dans ce cas, l'centrée sur la colonne du chevauchement entre la colonne ci-dessus. Visuellement la page peut regarder la même chose, mais les événements de la souris ne fonctionne pas sur la colonne qui est superposé (vous ne pouvez pas vous passez la souris ou cliquez sur les liens, par exemple). C'est parce que les événements de la souris sont en vous inscrivant sur le centrés sur la colonne qui recouvrent les éléments que vous essayez de cliquez sur.

Les Correctifs

Vous pouvez résoudre ce problème en utilisant un clearfix élément. À l'aide de z-index à apporter sur les colonnes centrées vers le bas ne fonctionnera pas, car il sera superposé lui-même, et, par conséquent, les événements de la souris va travailler dessus.

<div class="row">
  <div class="col-lg-12">
    I get overlapped by `col-lg-7 centered` unless there's a clearfix.
  </div>
  <div class="clearfix"></div>
  <div class="col-lg-7 centred">
  </div>
</div>

Ou vous pouvez isoler l'centrée sur la colonne dans sa propre ligne.

<div class="row">
  <div class="col-lg-12">
  </div>
</div>
<div class="row">
  <div class="col-lg-7 centred">
    Look I am in my own row.
  </div>
</div>

2. Utiliser col-lg-offset-x ou spanx-offset (Grands Gotcha)

<!-- Bootstrap 3 -->
<div class="col-lg-6 col-lg-offset-3">
  Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 span-offset-3">
  Centred content.
</div>

Le premier problème est que votre centrée sur la colonne doit être un nombre pair, car la valeur de l'offset doit répartir uniformément par 2 pour la mise en page centrée (gauche/droite).

Deuxièmement, comme certains l'ont fait remarquer, à l'aide de décalages est une mauvaise idée. C'est parce que lorsque le navigateur est redimensionnée de la compensation à son tour dans l'espace vide, en poussant le contenu réel de la page.

3. Créer un Intérieur Centrée sur la Colonne

C'est la meilleure solution, à mon avis. Pas de piratage nécessaire et vous n'avez pas déconner avec la grille, ce qui pourrait avoir des conséquences inattendues, comme pour les solutions 1 et 2.

.col-centred {
   margin: 0 auto;
}

<div class="row">
  <div class="col-lg-12">
    <div class="centred">
        Look I am in my own row.
    </div>
  </div>
</div>

Answer 5

Définir la largeur de 960px, ou ce que vous préférez, et vous êtes bon pour aller!

#main {
 margin: 0 auto !important;
 float: none !important;
 text-align: center;
 width: 960px;
}

(Je ne pouvais pas comprendre cela jusqu'à ce que je fixe la largeur, rien d'autre n'a fonctionné.)