Question Centrer une colonne en utilisant Twitter Bootstrap 3


Comment puis-je centrer un div d'une taille de colonne dans le conteneur (12 colonnes) Twitter Bootstrap 3.

S'il vous plaît voir le starter violon.

<body class="container">
    <div class="col-lg-1 col-offset-6 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

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

Je ne suis pas sûr non plus que l'approche ci-dessus soit suffisante car l'intention n'est pas de compenser div de moitié. Je n'ai pas besoin d'espaces libres en dehors du div et le contenu de div rétrécir en proportion. je veux espace vide à l'extérieur de la div pour être réparti uniformément (rétrécir jusqu'à la largeur du récipient == une colonne).


972
2017-08-09 18:24


origine


Réponses:


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

Approche 1 (décalages):

La première approche utilise les propres classes de décalage de Bootstrap, de sorte qu'il ne nécessite aucun changement de balisage et pas de 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 serait centrée en ajoutant un décalage de 5, c'est (12-2)/2.

Dans le balisage, cela ressemblerait à:

<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, cela ne fonctionne que pour les tailles de colonnes paires, donc seulement .col-X-2, .col-X-4, col-X-6, col-X-8 et col-X-10 sont pris en charge.


Approche 2 (l'ancienne marge: auto)

Vous pouvez centrer toute taille de colonne en utilisant le prouvé margin: 0 auto; technique, vous avez juste besoin de prendre soin de la flottaison qui est ajoutée par le système de grille de Bootstrap. Je recommande de définir une classe CSS personnalisée comme celle-ci:

.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 façon transparente avec la mise en page réactive de Bootstrap:

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

Remarque: Avec ces deux techniques, vous pouvez ignorer .row élément 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 en raison du remplissage dans la classe de conteneur.


Mettre à jour:

Depuis v3.0.1 Bootstrap a une classe intégrée nommée center-block qui utilise margin: 0 auto mais il manque float:none. Vous pouvez l'ajouter à votre CSS pour le faire fonctionner avec le système de grille.


1745
2017-08-09 18:45



La méthode préférée de colonnes de centrage est d'utiliser des "offsets" (ie: col-md-offset-3)

Bootstrap 3.x exemples de centrage

Pour éléments de centrage, Il y a un center-block  classe d'aide.

Vous pouvez aussi utiliser text-center à texte du centre (et éléments en ligne).

Démo: http://bootply.com/91632

MODIFIER - Comme mentionné dans les commentaires, center-block fonctionne sur le contenu de la colonne et display:block éléments, mais ne fonctionnera pas sur la colonne elle-même (col-* divs) parce que Bootstrap utilise float.


Mise à jour 2018

Maintenant avec Bootstrap 4, la centrage les méthodes ont changé ..

  • text-centerest encore utilisé pour display:inline éléments
  • mx-auto remplace center-block au centre display:block éléments
  • offset-*  ou  mx-auto peut être utilisé pour centrer les colonnes de la grille

mx-auto (les marges automatiques de l'axe x) seront centrées display:block ou display:flex éléments qui ont un largeur définie, (%, vw, px, etc..). Flexbox est utilisé par défaut sur les colonnes de la grille, il existe donc différentes méthodes de centrage flexbox.

Démo Bootstrap 4 Centrage horizontal

Pour le centrage vertical dans BS4 voir  https://stackoverflow.com/a/41464397/171456


244
2017-12-03 18:12



Maintenant Bootstrap 3.1.1 travaille avec .center-block, et cette classe d'aide fonctionne avec le système de colonnes.

Bootstrap 3 Centre de cours d'assistance.

Vérifiez s'il vous plaît cette jsfiddle DEMO:

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Helper classes center

Centre de colonne de ligne utilisant col-center-block classe d'aide.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

90
2018-03-18 06:31



Il suffit d'ajouter ceci à votre fichier CSS personnalisé, l'édition directe des fichiers CSS Bootstrap n'est pas recommandée et annule votre capacité à utiliser un cdn.

.center-block {
    float: none !important
}

Pourquoi? 

Bootstrap CSS (Ver 3.7 et inférieur) utilise: marge: 0 auto;, mais il est remplacé par la propriété float du conteneur de taille.

PS: Après avoir ajouté cette classe, n'oubliez pas de définir les classes dans le bon ordre.

<div class="col-md-6 center-block">Example</div>

50
2017-12-15 03:12



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

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

Si vous utilisez encore 2.X, ajoutez-le simplement à votre CSS.


37
2017-08-09 18:39



Mon approche des colonnes centrales est d'utiliser display: inline-block pour les colonnes et text-align: center pour le parent conteneur.

Il suffit d'ajouter la classe CSS 'centrée' au row.

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSfiddle: http://jsfiddle.net/steyffi/ug4fzcjd/


31
2018-02-16 10:27



Bootstrap la version 3 a une classe .text-center.

Ajoutez simplement cette classe:

text-center

Il va simplement charger ce style:

.text-center {
    text-align: center;
}

Exemple:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>   

25
2017-07-16 14:20



Cela marche. Une manière hackish probablement, mais cela fonctionne bien. Il a été testé pour réactif (Y).

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

Desktop

Responsive


11
2017-08-09 21:47



Vous pouvez utiliser text-center pour la ligne, et assurez-vous que les divs internes ont display:inline-block ( avec pas float )

comme:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

et css:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

Le violon: http://jsfiddle.net/DTcHh/3177/


6
2018-01-13 08:39



Réglez simplement votre colonne qui affiche le contenu à col-xs-12 (mobile-first ;-) et configurez le conteneur uniquement pour contrôler la largeur de votre contenu centré, donc:

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

<body class="container col-xs-offset-1 col-xs-10">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Pour une démo, voir http://codepen.io/Kebten/pen/gpRNMe :-)


6
2018-06-13 13:14