web-dev-qa-db-fra.com

Comment centrer un Bootstrap div avec une classe 'spanX'?

J'utilise bootstrap) et j'essaie de centrer un div (span7) comme celui-ci:

<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 ce n'est pas au centre. Comment puis-je mettre le centre?

EDIT

span7 est maintenant col-7 in Bootstrap 4

csstwitter-bootstrap
67
sundowatch

Twitter bootstrap .span Les classes sont placées à gauche pour ne pas se centrer normalement. Donc, si vous voulez qu'il centre votre span ajoutez simplement float:none à ton #main règle.

CSS 

#main {
 margin:0 auto;
 float:none;
}
130
Andres Ilich

Incidemment, si votre classe span est numérotée de manière paire (par exemple, span8) vous pouvez ajouter une classe offset pour la centrer - pour span8 ce serait offset2 _ (en utilisant la grille par défaut de 12 colonnes), pour span6 ce serait offset3 et ainsi de suite (en gros, la moitié du nombre de colonnes restantes si vous soustrayez le nombre span- du nombre total de colonnes de la grille).

[~ # ~] mettre à jour [~ # ~] Bootstrap 3 renommé de nombreuses classes donc tous les span*classes devrait être col-md-* et les classes offset doivent être col-md-offset-*, en supposant que vous utilisez la grille réactive de taille moyenne.

J'ai créé une démonstration rapide ici, j'espère que cela aidera: http://codepen.io/anon/pen/BEyHd .

34
spinningarrow

Si quelqu'un veut la vraie solution pour centrer les DEUX images et le texte dans une étendue en utilisant bootstrap row-fluid, la voici (comment l'implémenter et l'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>

USAGE: Pour utiliser ce css afin de centrer une image sur une étendue, appliquez simplement la classe .center-in-span à l'élément img, comme indiqué ci-dessus.

Pour utiliser ce css afin de centrer le texte dans une étendue, appliquez simplement la classe .center-in-span à l'élément p, comme indiqué ci-dessus.

EXPLICATION: Ce css fonctionne parce que nous modifions un style spécifique bootstrap. Les différences notables par rapport aux autres réponses postées sont que la largeur et la hauteur sont définies sur auto. utilisé avec un fixe avec (bon pour une page Web dynamique). également, la combinaison de régler la marge sur auto, text-align: center et display: block, prend en charge les images et les paragraphes.

Faites-moi savoir si cela est suffisamment complet pour une mise en œuvre facile.

14
mkralla11

Mise à jour

À partir de BS3, il y a un .center-block classe d'assistance. De la docs:

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

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

Il y a une complexité cachée dans ce problème apparemment simple. Toutes les réponses données ont quelques problèmes.

1. Créer un cours personnalisé (Gotcha majeur)

Créer .col-centred _ classe, mais il y a un casse-tête majeur.

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

Le Gotcha

Bootstrap nécessite que les colonnes totalisent 12. Sinon, elles se chevaucheront, ce qui pose problème. Dans ce cas, la colonne centrée chevauchera la colonne au dessus de celle-ci. Visuellement, la page peut sembler identique, mais les événements de souris ne fonctionneront pas sur la colonne superposée (vous ne pouvez pas survoler ou cliquer sur des liens, par exemple). Cela est dû au fait que les événements de souris sont enregistrés sur la colonne centrée qui chevauche les éléments sur lesquels vous essayez de cliquer.

Les correctifs

Vous pouvez résoudre ce problème en utilisant un élément clearfix. En utilisant z-index mettre la colonne centrée en bas ne fonctionnera pas car elle se chevauchera elle-même et par conséquent les événements de la souris fonctionneront 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 la colonne centrée 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. Utilisez col-lg-offset-x ou spanx-offset (Major 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 colonne centrée doit être un nombre pair car la valeur de décalage doit être divisée également par 2 pour que la présentation soit centrée (gauche/droite).

Deuxièmement, comme certains l’ont commenté, l’utilisation de compensations est une mauvaise idée. En effet, lorsque le navigateur redimensionnera, le décalage se transformera en un espace vide, ce qui poussera le contenu réel vers le bas de la page.

3. Créer une colonne centrée sur l'intérieur

C'est la meilleure solution à mon avis. Aucun piratage requis et vous ne dérangez pas le réseau, ce qui pourrait avoir des conséquences inattendues, conformément aux 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>
3
Mohamad

Définissez la largeur sur 960 pixels, ou ce que vous préférez, et vous êtes prêt à partir!

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

(Je ne pouvais pas comprendre cela avant d'avoir fixé la largeur, rien d'autre n'a fonctionné.)

1
ATSiem