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:
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.
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
.
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 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
.
Col 1 Col 2 Col 3
.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; }
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.
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
Le mécanisme est:
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
: