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>
Nombre de travées et de décalages modifiés...
Mais je ne peux pas obtenir une boîte simple parfaitement centrée sur une page : (
Je veux juste une boîte de 6 colonnes centrée...
modifier:
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, y a-t-il un moyen de le faire avec span7 ?
span7 offset2 donne un rembourrage supplémentaire pour la gauche span7 offset3 rembourrage supplémentaire à droite...
8 réponses
En plus de réduire la div elle-même à la taille que vous voulez, en réduisant la taille de l'envergure comme ceci... class="span6 offset3", class="span4 offset4", etc... quelque chose d'aussi simple que de 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 centrer l'étendue sur la page (car total spans = 12)
Les travées de Bootstrap sont flottées vers la gauche. Tout ce qu'il faut centre est remplacer ce comportement. Je le fais en ajoutant ceci à ma feuille de style:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
Si vous avez cette classe définie, ajoutez-la simplement à la durée et vous êtes prêt à partir.
<div class="span7 center"> box </div>
Notez que cette classe de Centre personnalisé doit être définie après le css bootstrap. Vous pouvez utiliser !important, mais ce n'est pas recommandé.
Si vous voulez aller full-bootstrap (et non la voie automatique gauche/droite), vous avez besoin d'un modèle qui s'adaptera à 12 colonnes, par exemple 2 blancs, 8 contenus, 2 blancs. C'est ce que cette configuration va faire. Il ne couvre que les variantes -md-, j'ai tendance à l'aligner en taille réelle pour les petites 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 centrer aligner un seul conteneur. Le framework bootstrap pourrait compliquer 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 un Bootstrap .container div.
Ajouter la classe centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
@ ZuhaibAli code genre de travail pour moi mais je l'ai changé un peu:
J'ai créé une nouvelle classe en 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.
Suivez ces instructions https://getbootstrap.com/docs/3.3/css/
Utiliser .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}