Centrer une colonne en utilisant Twitter Bootstrap

Comment centrer une div d’une taille de colonne dans le conteneur (12 colonnes) dans Twitter Bootstrap 3.

S’il vous plaît voir le violon de départ

 

Donc, je veux un div , avec une classe centered pour être centrée dans le conteneur. Je peux utiliser une ligne s’il y a plusieurs div, 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 le div par la moitié. Je n’ai pas besoin d’espaces libres en dehors du div et le contenu du div diminue en proportion. Je veux vider l’espace en dehors du div pour être uniformément dissortingbué (réduire jusqu’à la largeur du conteneur == une colonne).

Il existe deux approches pour centrer une colonne

dans Bootstrap 3:

Approche 1 (compensations):

La première approche utilise les propres classes de décalage de Bootstrap, ce qui ne nécessite aucun changement de balisage ni 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, soit (12-2)/2 .

En balisage, cela ressemblerait à ceci:

 

Maintenant, il y a un inconvénient évident pour cette méthode, elle ne fonctionne que pour des tailles de colonnes .col-X-2 , de sorte que seuls les .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 n’importe quelle taille de colonne en utilisant la margin: 0 auto; prouvée margin: 0 auto; technique, vous avez juste besoin de prendre soin du flottant qui est ajouté par le système de grid de Bootstrap. Je recommande de définir une classe CSS personnalisée comme suit:

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

Maintenant, vous pouvez l’append à n’importe quelle taille de colonne, quelle que soit la taille de l’écran, et cela fonctionnera de manière transparente avec la disposition réactive de Bootstrap:

 

Remarque: avec les deux techniques, vous pouvez ignorer l’élément .row et centrer la colonne dans un .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.


Mettre à jour:

Depuis la version 3.0.1, Bootstrap a une classe intégrée nommée center-block qui utilise une margin: 0 auto mais il manque un float:none . Vous pouvez append cela à votre CSS pour le faire fonctionner avec le système de grid.

La méthode préférée de centrage des colonnes consiste à utiliser des “décalages” (c. col-md-offset-3 d. col-md-offset-3 )

Bootstrap 3.x exemples de centrage

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

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

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

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


Mise à jour 2018

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

  • text-center est toujours utilisé pour l’ display:inline éléments en display:inline
  • mx-auto remplace le center-block central par l’ display:block central display:block éléments de display:block
  • offset-* ou mx-auto peut être utilisé pour centrer les colonnes de la grid

mx-auto (marges auto-axe x) centrera l’ display:block ou display:flex éléments display:flex d’une largeur définie ( % , vw , px , etc.). Flexbox est utilisé par défaut sur les colonnes de la grid, il existe donc également 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

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

Bootstrap 3 Helper Class Center .

S’il vous plaît vérifier ce jsfiddle DEMO :

 
row center-block
1 center-block
2 center-block
row col-xs-2 col-center-block

Centre de classes d'assistance

Centre de colonnes de lignes utilisant une classe auxiliaire de col-center-block .

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

Ajoutez simplement ceci à votre fichier CSS personnalisé, éditer directement les fichiers CSS Bootstrap n’est pas recommandé et annule votre capacité à utiliser un cdn.

 .center-block { float: none !important } 

Pourquoi?

Bootstrap CSS (Ver 3.7 et versions inférieures) utilise: margin: 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.

 
Example

Bootstrap 3 a maintenant une classe .center-block pour ce .center-block

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

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

Mon approche des colonnes centrales consiste à utiliser display: inline-block pour les colonnes et text-align: center pour le parent du conteneur.

Il vous suffit d’append la classe CSS ‘centrée’ sur la row .

HTML:

 
Col 1
Col 2
Col 3

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/

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

 
Bootstrap 4 is coming....

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

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

Bureau

Sensible

Vous pouvez utiliser text-center pour la ligne et vous assurer que les div internes ont un display:inline-block (sans float )

comme:

 
A red block
A white block
A yellow block

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/

Il vous suffit de définir votre colonne affichant le contenu sur col-xs-12 (mobile-first 😉 et de configurer le conteneur uniquement pour contrôler la largeur souhaitée de votre contenu centré:

 .container { background-color: blue; } .centered { background-color: red; } 
  

Pour centrer le col, nous devons utiliser le code ci-dessous. Les colonnes sont des éléments flottants en plus de la marge automatique. Nous allons également le mettre à flot aucune,

  

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

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

Pour centrer le contenu dans le div, utilisez text-align:center ,

 .centered { text-align: center; } 

Si vous souhaitez le centrer uniquement sur le bureau et sur un écran plus grand, et non 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; } } 

Ce n’est probablement pas la meilleure réponse, mais il existe une autre solution créative. Comme le souligne koala_dev, le décalage des colonnes ne fonctionne que pour des tailles de colonnes égales. Cependant, en imbriquant des lignes, vous pouvez également centrer des colonnes inégales.

S’en tenir à la question d’origine où vous voulez centrer une colonne de 1 à l’intérieur d’une grid de 12.

  1. Centrez une colonne de 2 en la décalant 5
  2. Créez une ligne nestede pour obtenir 12 nouvelles colonnes dans vos 2 colonnes.
  3. Puisque vous voulez centrer une colonne de 1 et que 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 nestede, ce qui se fait facilement.

Par exemple:

 
centered column with that has an "original width" of 1 col

Voir ce violon , notez s’il vous plaît que vous devez augmenter la taille de la fenêtre de sortie pour voir aussi le résultat, sinon les colonnes seront emballées.

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

 
Centered Content
 

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

Le mécanisme est:

  1. Enveloppez toutes les colonnes dans une div.
  2. Faites en sorte que div soit une table avec une mise en page fixe.
  3. Créez chaque colonne comme une cellule de tableau.
  4. Utilisez la propriété d’alignement vertical pour contrôler la position du contenu.

La démo de l’échantillon est ici

Entrez la description de l'image ici

Comme koala_dev a utilisé dans son approche 1, je préférerais la méthode de décalage au lieu du bloc central ou des marges qui ont 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 colonnes égales, de sorte que seuls les formats .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.

 
// Your content here

Vous pouvez utiliser la solution flexible pour votre Bootstrap.

 justify-content: center; 

peut centrer votre colonne.

Découvrez flex .

Avec Bootstrap v4, cela peut être accompli simplement en ajoutant .justify-content-center au .row

 
centered 1 column

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

Comme je n’ai jamais besoin de centrer un seul .col- dans un .row , je définis la classe suivante sur le .row enveloppant de mes colonnes cibles.

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

Exemple

 
Foo
Bar

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

 function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) { var arrayFill = function (size, content) { return Array.apply(null, Array(size)).map(Ssortingng.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 voulez en avoir 3 par ligne sur un écran md , 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 pouvoir être divisé par 12.

Pour centrer plusieurs colonnes dans une ligne Bootstrap – et le nombre de colonnes est impair, ajoutez simplement cette classe css à 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:

 

You See

I love coding.

You See

I love coding.

You See

I love coding.

Ce n’est pas mon code, mais il fonctionne parfaitement (testé sur Bootstrap 3) et je n’ai pas à me soucier du décalage des couleurs.

Démo:

 /* centered columns styles */ .row-centered { text-align: center; } .col-centered { display: inline-block; float: none; /* reset the text-align */ text-align: left; /* inline-block space fix */ margin-right: -4px; text-align: center; background-color: #ccc; border: 1px solid #ddd; } 
 
Column 6
Column 6
Column 3
Column 3
Column 3

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

 .row-centered { display: flex; justify-content: space-between; } 

Essaye ça

 

Vous pouvez également utiliser d’autres col comme col-md-2 , etc.

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

 
... your content / data will come here ...

«col-xs-offset-5» indique au système de grid où commencer à placer le contenu.

«col-xs-2» indique au système de grid le nombre de colonnes restantes que le contenu doit occuper.

‘centré’ sera une classe définie qui centrera le contenu.

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

Colonnes:

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

……. offset …….. données. …….non utilisé……..

Essayez ce code.

  

Ici, j’ai utilisé col-lg-1, et le décalage devrait être 10 pour bien centrer le div sur les gros appareils, si vous en avez besoin pour vous centrer sur mediam en gros appareil, il suffit de changer le lg en md et ainsi de suite en cas de problème.

N’oubliez pas d’append !important . Alors vous pouvez être sûr que cet élément sera vraiment au centre:

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

Méthode 1:

 
YOUR CONTENT

Méthode 2:

CSS

 .float-center{float: none;} 
YOUR CONTENT

Bootstrap Astuces, exemples et outils: OnAirCode

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