Centrer une colonne avec Twitter Bootstrap 3
Comment centrer une div d'une taille de colonne dans le conteneur (12 colonnes) dans Twitter Bootstrap ?
.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'un div, avec une classe .centered soit centré dans le conteneur. Je peux utiliser une ligne s'il y a plusieurs divs, mais pour l'instant, je veux juste un div de 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 la div de moitié. Je n'ai pas besoin d'espaces libres en dehors de la div et le contenu de la div se contracte proportionnellement. Je veux que l'espace vide en dehors de la div soit uniformément distribué (réduit jusqu'à ce que la largeur du conteneur soit égale à une colonne).
Il existe deux approches pour centrer une colonne <div> dans Bootstrap 3:
approche 1 (compensations):
La première approche utilise les propres classes d'offset de Bootstrap, de sorte qu'elle ne nécessite aucune modification du balisage ni 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, soit (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 des tailles de colonnes égales, donc seuls .col-X-2, .col-X-4, col-X-6, col-X-8 et col-X-10 sont pris en charge.
approche 2 (l'ancien margin:auto)
Vous pouvez centrer toute taille de colonne en utilisant la technique éprouvée margin: 0 auto;. Vous devez juste vous occuper du flottant ajouté par le système de grille 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'ajouter à n'importe quelle taille de colonne à n'importe quelle taille d'écran, et cela fonctionnera de manière transparente avec la disposition 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’élément .row et placer la colonne au centre de .container, mais vous remarquerez une différence minimale dans la taille réelle de la colonne en raison de la rembourrage dans la classe conteneur.
Mise à jour:
Depuis la v3.0.1, Bootstrap possède une classe intégrée nommée center-block qui utilise margin: 0 auto, mais est manquante float:none, vous pouvez l'ajouter à votre CSS pour le rendre travailler avec le système de grille.
La méthode préférée pour centrer les colonnes consiste à utiliser des "décalages" (c'est-à-dire: col-md-offset-3)
exemples de centrage Bootstrap 3.x
Pour éléments de centrage , il existe un center-blockclasse d'assistance .
Vous pouvez également utiliser text-center pour centrer le texte (et les éléments en ligne).
Démo : http://bootply.com/91632
EDIT - Comme indiqué dans les commentaires, center-block fonctionne sur le contenu des colonnes et display:block éléments, 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 été modifiées.
text-centerest toujours utilisé pour les élémentsdisplay:inlinemx-autoremplacecenter-blockpour centrer les élémentsdisplay:blockoffset-*oumx-autopeut être utilisé pour centrer les colonnes de la grille
mx-auto (les marges automatiques de l'axe des abscisses) centreront display:block ou display:flex éléments ayant une largeur définie , (% , vw, px, etc ..). Flexbox est utilisé par défaut sur les colonnes de la grille. Il existe donc diverses 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 d'assistance fonctionne avec le système de colonnes.
Bootstrap 3 Helper Class Center .
Veuillez vérifier this 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>
Centre de colonne de ligne utilisant la classe d'assistance col-center-block.
.col-center-block {
float: none;
display: block;
margin: 0 auto;
/* margin-left: auto; margin-right: auto; */
}
Ajoutez simplement ce qui suit à votre fichier CSS personnalisé. La modification directe de fichiers Bootstrap _ CSS 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 marge: 0 auto; , mais il est remplacé par la propriété float du conteneur size.
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>
Bootstrap a maintenant une classe intégrée pour ce .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Si vous utilisez toujours 2.X, ajoutez simplement ceci à votre CSS.
Mon approche pour centrer les colonnes consiste à utiliser display: inline-block pour les colonnes et text-align: center pour le parent du conteneur.
Vous devez juste ajouter la classe CSS 'centrée' à la 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/
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>
Avec Bootstrap v4, ceci peut être accompli simplement en ajoutant .justify-content-center au .row<div>
<div class="row justify-content-center">
<div class="col-1">centered 1 column</div>
</div>
https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
Cela marche. Un moyen fictif probablement, mais cela fonctionne bien. Il a été testé pour responsive (Y).
.centered {
background-color: teal;
text-align: center;
}
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 souhaitée de votre contenu centré, ainsi:
.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émonstration, voir http://codepen.io/Kebten/pen/gpRNMe :-)
Vous pouvez utiliser text-center pour la ligne et vous assurer que les divs internes ont bien display:inline-block (sans 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/
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<img src="some.jpg">
</div>
</div>
</div>
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>
Ce n’est probablement pas la meilleure solution, mais il existe une solution créative supplémentaire. Comme l'a souligné koala_dev, le décalage de colonne ne fonctionne que pour des tailles de colonne égales. Cependant, en imbriquant des lignes, vous pouvez également centrer des colonnes inégales.
Pour rester avec la question initiale où vous voulez centrer une colonne de 1 dans une grille de 12.
- Centrer une colonne de 2 en la décalant 5
- Créez une ligne imbriquée pour obtenir 12 nouvelles colonnes dans vos 2 colonnes.
- Puisque vous voulez centrer une colonne de 1 et que 1 correspond à "la moitié" de 2 (ce que nous avons centré à l'étape 1), vous devez maintenant centrer une colonne de 6 dans votre rangée imbriquée, ce qui se fait facilement en compensant 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 le résultat, sinon les colonnes seront renvoyées à la ligne.
Pour centrer la colonne, 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 à 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 la 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 dans la 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 mobile, utilisez la requête multimédia suivante.
@media (min-width: 768px) {
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
}
Et pour centrer la 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 pas mon code, mais il fonctionne parfaitement (testé sur Bootstrap 3) et je n'ai pas à me soucier de 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>Nous pouvons y parvenir en utilisant le mécanisme de présentation de la table:
Le mécanisme est:
- Envelopper toutes les colonnes dans un div.
- Faites cette div comme une table avec une mise en page fixe.
- Faites chaque colonne comme une cellule de tableau.
- Utilisez la propriété vertical-align pour contrôler la position du contenu.
La démo de l'échantillon est ici
Comme koala_dev l'a utilisé dans son approche 1, je préférerais la méthode offset au bloc central ou aux marges, dont l'utilisation est 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 seuls .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>
Vous pouvez utiliser la solution très flexible flexbox à votre Bootstrap.
justify-content: center;
peut centrer votre colonne.
Départ flex.
Avec bootstrap 4, vous pouvez simplement essayer justify-content-md-center comme 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>
Comme je n'ai jamais besoin de centrer un seul .col- dans un .row, j'ai défini la classe suivante sur le wrapping .row de 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>
Pour centrer plus d'une colonne dans une ligne Bootstrap - et que 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:
<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>
Ajoutez l’extrait suivant à l’intérieur de votre .row ou de votre .col. Ceci est pour Bootstrap 4 *.
d-flex justify-content-center
Pour ceux qui cherchent à centrer les éléments de colonne sur l'écran lorsque vous ne disposez pas du nombre exact pour remplir votre grille, 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(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 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"]
Rappelez-vous que le deuxième argument doit être divisé par 12.
Solution Bootstrap 4:
<div class="container">
<div class="row">
<div class="col align-self-center">
Column in the middle, variable width
</div>
</div>
</div>
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 doit être de 10 pour centrer correctement la div sur les gros périphériques. Si vous en avez besoin pour vous concentrer sur des périphériques de moyenne à grande taille, changez simplement le lg en md, etc.
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>
Utilisez mx-auto dans votre classe div en utilisant Bootstrap 4.
<div class="container">
<div class="row">
<div class="mx-auto">
You content here
</div>
</div>
</div>
Si vous mettez ceci sur votre ligne, toutes les colonnes à l'intérieur seront centrées:
.row-centered {
display: flex;
justify-content: space-between;
}
Méthode 1:
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-5">
YOUR CONTENT
</div>
</div>
</div>
Méthode 2:
CSS
.float-center{float: none;}
<div class="container">
<div id="mydev" class="center-block float-center" style="width:75%;">
YOUR CONTENT
</div>
</div>
Bootstrap Conseils, exemples et outils: OnAirCode
Pour être plus précis, le système de grille de Bootstrap contient 12 colonnes et pour centrer tout 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 le placement du 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 cet exemple ressemble 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é........
Essaye ça
<div class="row">
<div class="col-xs-2 col-xs-offset-5"></div>
</div>
Vous pouvez aussi utiliser d'autres col comme col-md-2, etc.
N'oubliez pas d'ajouter !important. Ensuite, vous pouvez être sûr que cet élément sera vraiment au centre:
.col-centered{
float: none !important;
margin: 0 auto !important;
}