Centrer une colonne à l'aide de Twitter Bootstrap 3

1146

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

.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>
Développer l'extrait

Je veux un div, avec une classe .centeredà centrer dans le conteneur. Je peux utiliser une ligne s'il y en a plusieursdiv s, mais pour l'instant je veux juste un divavec 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 suffisamment bonne car l'intention n'est pas de compenser divde moitié. Je n'ai pas besoin d'espaces libres en dehors de divet le contenu du divrétrécissement en proportion. Je veux vider l'espace en dehors de la div pour être réparti uniformément (rétrécir jusqu'à ce que la largeur du conteneur soit égale à une colonne).

css  twitter-bootstrap  twitter-bootstrap-3  centering 
— bsr
source

Réponses:

1963

Il existe 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, donc elle ne nécessite aucun changement de balisage et aucun 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. Il ne fonctionne que pour la taille des colonnes même , de sorte que .col-X-2, .col-X-4, col-X-6, col-X-8et col-X-10sont pris en charge.

Approche 2 (l'ancienne margin:auto)

Vous pouvez centrer n'importe quelle taille de colonne en utilisant la margin: 0 auto;technique éprouvée . Il vous suffit de prendre soin du flottant ajouté 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;
}

Vous pouvez maintenant l'ajouter à n'importe quelle taille de colonne et à 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>

Remarque: Avec les deux techniques, vous pouvez ignorer l' .rowélément et placer la colonne au centre de a .container, mais vous remarquerez une différence minimale dans la taille réelle de la colonne en raison du remplissage dans la classe de conteneur.

Mise à jour:

Puisque v3.0.1 Bootstrap a une classe intégrée nommée center-blockqui utilise margin: 0 auto, mais qui est manquante float:none, vous pouvez l'ajouter à votre CSS pour la faire fonctionner avec le système de grille.

— koala_dev
source
1
je pense qu'il n'y a pas de flottant: aucun dans la règle du bloc central car il existe une règle indépendante de clearfix que vous pouvez ajouter aux éléments pour effacer les flottants.
— Diego Fernando Murillo Valenci
7
@DiegoFernandoMurilloValenci .clearfixne fonctionnerait pas dans ce cas car il ne supprime pas la propriété float sur les éléments (qui est nécessaire pour centrer à l'aide margin: 0 auto), il fait juste envelopper un conteneur tous les éléments flottés à l'intérieur
— koala_dev
4
ne peut pas utiliser ceci sur une colonne, car nonfloat:none;
— airtonix
2
Si vous souhaitez centrer plus d'une colonne sur une seule ligne, consultez cette réponse stackoverflow.com/questions/28683329/…
— Conor Svensson
3
La syntaxe de l'offset a changé dans Bootstrap4 (à partir de la dernière version). En utilisant cette réponse comme exemple: la classe col-md-offset-5 devrait maintenant être offset-md-5.
— lgants
296

Le procédé préféré de centrage colonnes consiste à utiliser des « décalages » (ie: col-md-offset-3)

Exemples de centrage Bootstrap 3.x

Pour les éléments de centrage , il existe une center-block classe d'assistance .

Vous pouvez également utiliser text-centerpour centrer le texte (et les éléments en ligne).

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

EDIT - Comme mentionné dans les commentaires,center-blockfonctionne sur le contenu et lesdisplay:blockéléments de lacolonne, mais ne fonctionnera pas sur la colonne elle-même (col-*divs) car Bootstrap l'utilisefloat.

Mise à jour 2018

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

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

mx-auto(marges automatique d'axe x) se concentreront display:blockou des display:flexéléments qui ont une largeur définie , ( %, vw, px, etc ..). Flexbox est utilisé par défaut sur les colonnes de la grille, il existe donc également différentes méthodes de centrage de Flexbox.

Demo Bootstrap 4 Centrage horizontal

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

— Zim
source
31
Malheureusement, cette classe d'assistance ne fonctionne pas avec le système de colonnes car elle ne prend pas en charge la propriété float. Voir cette démo par exemple.
— koala_dev
13
Cela ne nécessite qu'un bloc central {float: none; }, et il fonctionne. bootply.com/122268
— Matias Vad
5
Je ne suis pas sûr de l'OP, mais je suis arrivé ici à la recherche du text-centerdétail - qu'aucune des autres réponses n'a fourni. Celui-ci obtient mon vote.
— domoarigato
1
ne peut pas utiliser ceci sur une colonne, car nonfloat:none;
— airtonix
98

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

Bootstrap 3 Helper Class Center .

Veuillez vérifier cette DÉMO jsfiddle :

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

Centre de cours auxiliaires

Centre de colonne de ligne à l' col-center-blockaide de la classe d'assistance.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
— Expéditeur
source
J'ai fait fonctionner cela sans ajouter float:noneen m'assurant que le bloc central div a le style="width : ?px"style qui lui est appliqué. Par exemple une largeur d'image. Fonctionne avec 3.2.2
— Piotr Kula
marge: 0 auto; - assez à la place marge-gauche + marge-droite
— mmike
57

Ajoutez simplement ce qui suit à votre fichier CSS personnalisé. La modification 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 (version 3.7 et inférieure) utilise la 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>
— Référencement Sagive
source
1
J'utilise Bootstrap 3.3.7et c'est la seule méthode qui fonctionne pour moi!
— illagrenan
1
cela marche. mais ne pense pas que ce !importantsoit nécessaire
— Gianfranco P.
1
@GianfrancoP. P. Vous avez raison, mais ... cela dépend de l'ordre de chargement et je voulais fournir une méthode infaillible.
— Sagive SEO
39

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

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

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

— Schmalzy
source
cela vous donnerait probablement l'effet désiré le plus facile. Jetez également de la largeur sur la classe .centered ou ajoutez une deuxième classe si vous optez pour une approche plus modulaire
— Matt Lambert
2
Ajout de float: aucun; to .centered vous permet de déplacer la classe vers le haut dans un conteneur. garde le code plus propre
— Adam Patterson
7
ne peut pas utiliser cela sur une colonne, car nonfloat:none;
— airtonix
37

Mon approche pour centrer les colonnes consiste à utiliser display: inline-blockpour les colonnes et text-align: centerpour le parent du conteneur.

Il vous suffit d'ajouter la classe CSS «centrée» au fichier 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/

— Steffi
source
2
C'est la seule réponse qui a fonctionné à 100% du temps - Les autres ont fonctionné, mais pas lorsque bootstrap est passé à sa vue mobile (les éléments ont été déplacés vers la gauche).
— Levi Fuller
C'était le seul qui m'a aussi fonctionné, .center-block ne fonctionne que pour une colonne et j'ai besoin de centrer toutes les colonnes indépendamment de leur nombre.
— cjohansson
La seule solution qui a fonctionné pour moi aussi. D'autres ne fonctionnaient que lorsque le navigateur était une fenêtre (pas en plein écran).
— kiwicomb123
26

Amorcer version 3 de a une classe .text-center.

Ajoutez simplement cette classe:

text-center

Il chargera simplement 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>
— RustyIngles
source
Clarifier où cette classe sera ajoutée?
— aksu
Bonjour @aksu, vous n'avez pas besoin d'ajouter de fichier .css. Regardez l'exemple fourni.
— JoshYates1980
15

Cela marche. Un moyen hacké probablement, mais ça marche bien. Il a été testé pour réactif (Y).

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

Bureau

Sensible

— Ali Gajani
source
ne fonctionne que parce que l'élément a un affichage en ligne. Un imgpeut être défini comme un bloc.
— ProfileTwist
Peut-être dans votre cas de test isolé. J'ajouterais .centered img { display: inline; }à votre réponse et cela mériterait plutôt un vote positif.
— ProfileTwist
Aucun problème. Je suis sûr que le PO trouvera sa réponse :)
— Ali Gajani
dans bootstrap 3, la classe .text-center fait la même chose en natif, comme je l'ai appris ci-dessus.
— domoarigato
7 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
— wali
source
6

Pour centrer la colonne, nous devons utiliser le code ci-dessous. les cols sont des éléments flottants en plus de margin auto. Nous allons également le mettre à flotter aucun,

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

Pour centrer le col-lg-1 ci-dessus avec la classe de centré, nous écrirons:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Pour centrer le contenu à l'intérieur du div, utilisez text-align:center,

.centered {
    text-align: center;
}

Si vous souhaitez le centrer uniquement sur le bureau et sur un écran plus grand, pas sur un mobile, utilisez la requête multimédia suivante.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

Et pour centrer le div uniquement sur la version mobile, utilisez le code ci-dessous.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}
— Aamer Shahzad
source
6

Définissez simplement votre colonne qui affiche le contenu sur 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>
Développer l'extrait

<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>
Développer l'extrait

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

— Kieran Ryan
source
6

Une autre approche de compensation consiste à avoir deux lignes vides, par exemple:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>
— LeRoy
source
1
2 divs inutiles, col-md-offset- * is better
— ymakux
1
Je suis d'accord. J'ai utilisé cette méthode car elle fonctionne bien et a été testée.
— LeRoy
6

Vous pouvez utiliser text-centerpour la ligne et vous assurer que les divisions 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/

— Alireza Fattahi
source
6

Avec bootstrap 4, vous pouvez simplement essayer justify-content-md-centercomme il est mentionné ici

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

entrez la description de l'image ici

— Hossein Narimani Rad
source
1
@AdamErickson La question demandait spécifiquement une solution bootstrap 3. Comme cette réponse est probablement la voie à suivre dans BS4, en 2019, certains logiciels utilisent toujours le bootstrap 3.
— A1rPun
5

Ce n'est probablement pas la meilleure réponse, mais il existe une autre solution créative à cela. Comme l'a souligné koala_dev, le décalage de colonne ne fonctionne que pour les tailles de colonne paires. Cependant, en imbriquant les lignes, vous pouvez également centrer les colonnes inégales.

Pour coller à la question d'origine où vous souhaitez centrer une colonne de 1 à l'intérieur d'une grille de 12.

  1. Centrez une colonne de 2 en la décalant de 5
  2. Faites une ligne imbriquée, vous obtenez donc 12 nouvelles colonnes à l'intérieur de vos 2 colonnes.
  3. Étant donné que vous souhaitez centrer une colonne de 1 et 1 est "la moitié" de 2 (ce que nous avons centré à l'étape 1), vous devez maintenant centrer une colonne de 6 dans votre ligne imbriquée, ce qui est facile à faire en la décalant 3.

Par exemple:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

Voir ce violon , veuillez noter que vous devez augmenter la taille de la fenêtre de sortie afin de voir aussi le résultat, sinon les colonnes seront bouclées.

— rappeler
source
5

Ce n'est pas mon code, mais cela fonctionne parfaitement (testé sur Bootstrap 3) et je n'ai pas besoin de jouer avec col-offset.

Démo:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}
<div class="container">
  <div class="row text-center">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>
Développer l'extrait

— Binar Web
source
4

Nous pouvons y parvenir en utilisant le mécanisme de disposition de table:

Le mécanisme est:

  1. Enveloppez toutes les colonnes dans une div.
  2. Faites ce div comme un tableau avec une disposition fixe.
  3. Faites de chaque colonne une cellule de tableau.
  4. Utilisez la propriété d'alignement vertical pour contrôler la position du contenu.

L'exemple de démonstration est ici

Entrez la description de l'image ici

— Mohan Dere
source
4

Ajoutez l'extrait suivant dans votre .row ou votre .col. C'est pour Bootstrap 4 *.

d-flex justify-content-center
— Thomas Chirwa
source
3

Comme koala_dev l'a utilisé dans son approche 1, je préférerais la méthode offset au lieu du bloc central ou des marges qui a une utilisation limitée, mais comme il l'a mentionné:

Maintenant, il y a un inconvénient évident pour cette méthode, elle ne fonctionne que pour des tailles de colonne égales, donc uniquement .col-X-2, .col-X-4, col-X-6, col-X-8 et col-X- 10 sont pris en charge.

Cela peut être résolu en utilisant l'approche suivante pour les colonnes impaires.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>
— Abhinav Singh
source
3

Vous pouvez utiliser la solution flexbox très flexible pour votre Bootstrap.

justify-content: center;

peut centrer votre colonne.

Découvrez flex .

— Dur
source
2

Parce que je n'ai jamais besoin de centrer uniquement un seul .col-dans un .row, j'ai défini la classe suivante sur l'encapsulation .rowde mes colonnes cible.

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Exemple

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>
— Walter Roman
source
2

Pour ceux qui cherchent à centrer les éléments de colonne sur l'écran lorsque vous n'avez pas le nombre exact pour remplir votre grille, j'ai écrit un petit morceau de JavaScript pour retourner les noms de classe:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

Si vous avez 5 éléments et que vous souhaitez en avoir 3 par ligne sur un mdécran, procédez comme suit:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

Gardez à l'esprit que le deuxième argument doit être divisible par 12.

— jsgoupil
source
2

Pour centrer plusieurs colonnes dans une ligne Bootstrap - et le nombre de colonnes est impair, ajoutez simplement cette cssclasse à toutes les colonnes de cette ligne:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

Donc, dans votre HTML, vous avez quelque chose comme:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>
— Ruto Collins
source
2

Essaye ça

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

Vous pouvez utiliser d' autres colaussi bien que col-md-2, etc.

— Ch UmarJamil
source
2

Je suggère simplement d'utiliser la classe text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>
— Dadhich Sourav
source
2

Essayez ce code.

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

Ici, j'ai utilisé col-lg-1, et le décalage devrait être de 10 pour bien centrer la div sur les gros appareils. Si vous en avez besoin pour vous concentrer sur des appareils moyens à grands, changez simplement le lg en md et ainsi de suite.

— Bangash
source
2

Solution Bootstrap 4 :

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>
— JanBrus
source
1

Si vous mettez cela sur votre ligne, toutes les colonnes à l'intérieur seront centrées:

.row-centered {
    display: flex;
    justify-content: space-between;
}
— Eran Shabi
source
a rendu l'élément non réactif.
— gfivehost
1

Pour être plus précis, le système de grille de Bootstrap contient 12 colonnes et pour centrer n'importe quel contenu, disons, par exemple, que le contenu occupe une colonne. Il faudra occuper deux colonnes de la grille de Bootstrap et placer le contenu sur la moitié des deux colonnes occupées.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5' indique au système de grille où commencer à placer le contenu.

'col-xs-2' indique au système de grille combien de colonnes restantes le contenu doit occuper.

«centré» sera une classe définie qui centrera le contenu.

Voici à quoi ressemble cet exemple dans le système de grille de Bootstrap.

Colonnes:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

....... offset ....... .data. .......non utilisé........

— Technologie
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.