Centrer une colonne à l'aide de Twitter Bootstrap 3

Comment centrer un div d'une taille de colonne dans le conteneur (12 colonnes) dans [Twitter Bootstrap 3][1] ?

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

Je veux qu'une div, avec une classe .centered soit centrée dans le conteneur. Je peux utiliser une ligne s'il y a plusieurs divs, mais pour l'instant je veux juste une div avec la taille d'une colonne centrée dans le conteneur (12 colonnes).

Je ne suis pas non plus certain que l'approche ci-dessus soit suffisante, car l'intention n'est pas de décaler la div de moitié. Je n'ai pas besoin d'espaces libres à l'extérieur de la div et le contenu de la div rétrécit en proportion. Je veux que les espaces vides à l'extérieur de la div soient distribués de manière égale (rétrécir jusqu'à ce que la largeur du conteneur soit égale à une colonne).

[1] : https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29 [2] : http://jsfiddle.net/qejjP/2/

daaawx
Question modifiée 17 mars 2019 в 7:03
Programmation
css twitter-bootstrap-3 twitter-bootstrap centering
9 août 2013 в 6:24
23 vues
Solution

Il existe deux approches pour centrer une colonne <div> dans Bootstrap 3 :

Approche 1 (décalages):

La première approche utilise les classes de décalage propres à Bootstrap, de sorte qu'elle ne nécessite aucune modification du balisage et aucune CSS supplémentaire. La clé est de définir un décalage égal à la moitié de la taille restante de la ligne. Ainsi, par exemple, une colonne de taille 2 sera centrée en ajoutant un décalage de 5, c'est-à-dire (12-2)/2.

Dans le balisage, cela ressemblerait à ceci :

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Maintenant, il y a un inconvénient évident pour cette méthode. Elle ne fonctionne que pour les tailles de colonnes paires, donc seuls les .col-X-2, .col-X-4, col-X-6, col-X-8, et col-X-10 sont supportés.

Approche 2 (l'ancienne margin:auto).

Vous pouvez centrer n'importe quelle taille de colonne en utilisant la technique éprouvée margin : 0 auto;. Vous devez juste prendre soin du flottement qui est ajouté par le système de grille de Bootstrap. Je recommande de définir une classe CSS personnalisée comme la suivante :

.col-centered{
    float: none;
    margin: 0 auto;
}

Maintenant, vous pouvez l'ajouter à n'importe quelle taille de colonne à n'importe quelle taille d'écran, et cela fonctionnera de manière transparente avec la mise en page réactive de Bootstrap :

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Note : Avec les deux techniques, vous pourriez sauter l'élément .row et avoir la colonne centrée à l'intérieur d'un .container, mais vous remarquerez une différence minime dans la taille réelle de la colonne à cause du padding de la classe container.

Mise à jour:

Depuis la version 3.0.1 de Bootstrap, une classe intégrée nommée center-block utilise margin : 0 auto, mais il lui manque float:none, vous pouvez l'ajouter à votre CSS pour la faire fonctionner avec le système de grille.

Peter Mortensen
Réponse modifiée 4 mars 2019 в 3:00
Commentaires (20)

Bootstrap 3 a maintenant une classe intégrée pour ce .center-block.

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

Si vous utilisez encore la version 2.X, il vous suffit d'ajouter ceci à votre CSS.

Schmalzy
Réponse modifiée 24 mars 2014 в 8:24
Commentaires (3)

Cela fonctionne. C'est probablement un peu compliqué, mais cela fonctionne bien. Il a été testé pour la réactivité (Y).

.centered {
    background-color: teal;
    text-align: center;
}

![Desktop][1]

![Responsive][2]

[1] : http://i.stack.imgur.com/dGRBO.png [2] : http://i.stack.imgur.com/tvMEA.png

Peter Mortensen
Réponse modifiée 30 juin 2016 в 4:01
Commentaires (5)