Centre une colonne en utilisant Twitter Bootstrap 3

Comment centrer une div de taille de la colonne à l'intérieur du conteneur (12 colonnes) dans Twitter Bootstrap 3?

CSS:

.centered {
  background-color: red;
}

HTML:

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

Je veux un div, avec une classe .centered être centré à l'intérieur du conteneur. Je peut utiliser une ligne si il y a plusieurs divs, mais pour l'instant je veux juste un div avec la taille d'une colonne centrée à l'intérieur du conteneur (12 colonnes).

Je ne suis pas aussi sûr que l'approche ci-dessus est assez bonne, car l'intention n'est pas de compenser la div de moitié. Je n'ai pas besoin espaces libres à l'extérieur de la div et le contenu de la div diminuer en proportion. Je veux espace vide en dehors de la div pour être distribué uniformément (rétrécir jusqu'à la largeur du conteneur est égale à la colonne).

InformationsquelleAutor bsr | 2013-08-09

1890

Il existe deux approches pour centrer une colonne <div> dans le Bootstrap 3:

Approche 1 (décalages):

La première approche utilise Bootstrap, propre à compenser les classes de sorte qu'il ne nécessite aucun changement dans le balisage et sans supplément de CSS. La clé est de définir un décalage égal à la moitié de la taille de la ligne. Ainsi, par exemple, une colonne de taille 2 serait centré par l'ajout d'un décalage de 5, c'est (12-2)/2.

Dans le balisage, ce serait:
```
<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>
```
Maintenant, il ya un inconvénient évident de cette méthode. Il ne fonctionne que pour la même taille de colonne, de sorte que seule .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 centre de toute taille de la colonne en utilisant la méthode éprouvée margin: 0 auto; technique. Vous avez juste besoin de prendre soin de la variable qui est ajouté par Bootstrap du système de grille. Je recommande la définition d'une classe CSS personnalisé comme suit:
```
.col-centered{
    float: none;
    margin: 0 auto;
}
```
Maintenant, vous pouvez l'ajouter à n'importe quelle colonne de la taille à la taille de l'écran, et il va travailler de façon transparente avec Bootstrap du responsive layout:
```
<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>
```
Remarque: Avec les deux techniques, vous pouvez ignorer le .row élément et d'avoir la colonne centrée à l'intérieur d'un .container, mais vous remarquerez une différence dans la taille de la colonne en raison du rembourrage dans la classe conteneur.

Mise à jour:

Depuis la v3.0.1 Bootstrap a une classe nommée center-block qui utilise margin: 0 auto, mais manquant float:none, vous pouvez l'ajouter à votre CSS pour le faire fonctionner avec le système de grille.
- je pense qu'il n'y a pas de float:none dans le centre-règle de blocage car il y a un clearfix indépendants de règles que vous pouvez ajouter des éléments à la compensation des flotteurs.
- ne fonctionne pas dans ce cas car il n'a pas retirer le flotteur de propriété sur les éléments (ce qui est nécessaire à l'aide du centre de margin: 0 auto), c'est juste un conteneur envelopper tout flottait éléments à l'intérieur
- Pour la deuxième approche du travail, de l'élément div doit avoir une largeur spécifiée, sinon il va occuper toute la largeur & ne sera pas centré
- cette question est à propos de centrage d'une colonne si nous supposons que la largeur peut être réglée avec un .col- classe
- correct ! J'ai ajouté ce commentaire pour quelqu'un qui a raté comme moi.
- Approche 2, c'est mieux. Merci.
- ne pouvez pas l'utiliser sur une colonne, parce que personne ne float:none;
- u peut fournir le code v3.0.1? mon code ne fonctionne pas. <div class="container"> <div class='row'> <div class='col-md-2 center-block'> <div class="page-header"> <h1 class='text-center'>Services</h1> </div> </div> </div> </div>
- Dans votre première approche: si le texte est grand, qu'il l'enveloppe, je suis à l'aide de "col-xs-12 col-xs-offser-2" comment gérer côté gauche de la marge.
- Approche n ° 2 a fonctionné pour moi, mais j'ai dû ajouter vertical-align: top à la .col-centered classe pour s'assurer de l'alignement vertical des blocs.
- Pourquoi n'est-ce pas simple fonctionnalité est intégrée Bootstrap déjà? Stupide.
- Sensible Centrée Bootstrap Colonnes minimit.com/articles/solutions-tutorials/...
- Si vous voulez centrer plus d'une colonne dans une seule ligne, voir cette réponse stackoverflow.com/questions/28683329/...
- c'est une réponse tardive, mais comme je le vois dans MDN, la page developer.mozilla.org/en-US/docs/Web/CSS/float la valeur initiale de float propriété est none. De sorte que vous pouvez régler. Plus précisément aucun Is a keyword indicating that the element must not float. Et c'est une nécessité si vous souhaitez placer une colonne dans le centre. Si vous le faites seulement avec margin ça ne marchera pas.
- L'Option 1 n'est pas centrer exactement sur mon site, je ne peux pas prendre l'option 2 pour fonctionner. Quelqu'un peut-il me donner une astuce sur ce qui manque ici? Voir drewclifton.com - merci!
- Approche 2, beau travail
- J'ai ajouté un peu plus à votre classe : .col-centré { float: none; margin: 0 auto; display: table; text-align: center; } maintenant, il fonctionne parfaitement pour moi
- votre lien m'a sauvé. Pour une raison quelconque Approche 2 ici ne permettent pas de résoudre plusieurs colonnes dans ma situation, mais que .row.text-center fait.
- bootstrap 4, vous pouvez utiliser justify-content: space-around ~~au lieu de~~ à la place de l'approche 2. il y aurait à un .la ligne contenant
- Bonne clarification sur "built-dans la classe nommé centre-bloc qui utilise margin: 0 auto, mais manquant float:none"
- La syntaxe pour compenser changé dans Bootstrap4 (comme de la dernière version). À l'aide de cette réponse comme un exemple: la classe col-md-offset-5 devrait maintenant être compensés-md-5.
- Pour bootstrap 4: les classes sont nommées offset-xx-4 getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
InformationsquelleAutor koala_dev
282

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

Bootstrap 3.x centrage des exemples

Pour centrage des éléments, il y a un center-block classe helper.

Vous pouvez également utiliser text-center à centre de texte (et des éléments inline).

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

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

Mise à jour 2018

Maintenant avec Bootstrap 4, le centrage méthodes ont changé..
- text-center est toujours utilisé pour la display:inline éléments
- mx-auto remplace center-block au centre display:block éléments
- offset-* ou mx-auto peut être utilisé pour centre de colonnes de la grille
mx-auto (auto x-axe marges) centre de display:block ou display:flex les éléments qui ont un largeur définie, (%, vw, px, etc..). Flexbox est utilisé par défaut sur des colonnes de la grille, donc il y a aussi différents flexbox centrage méthodes.

Démo Bootstrap 4 Centrage Horizontal

Pour le centrage vertical dans BS4 voir https://stackoverflow.com/a/41464397/171456
- Malheureusement cette classe d'assistance ne fonctionne pas avec le système à colonnes comme il ne prend pas soin de la propriété float. Voir cette démo par exemple.
- Qui a besoin d'un centre-bloc { float: none; }, et il fonctionne. bootply.com/122268
- pas sûr au sujet de l'OP, mais je suis ici à la recherche pour le text-center détail - qui aucune des autres réponses fournies. Celui-ci obtient mon vote.
- ne pouvez pas l'utiliser sur une colonne, parce que personne ne float:none;
- J'ai édité la réponse concernant les décalages.
- mx-auto de travail pour moi
InformationsquelleAutor Zim

Maintenant Bootstrap 3.1.1 travaille avec .center-block, et cette classe helper fonctionne avec le système à colonnes.

Bootstrap 3 Classe Helper Centre.

Veuillez vérifier ce jsfiddle DÉMO:

<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 une colonne en utilisant Twitter Bootstrap 3

Ligne de la colonne à l'aide du centre col-center-block de la classe helper.

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

J'ai obtenu ce travail sans l'ajout de float:none que l'div centre-bloc a la style="width : ?px" style est appliqué. Par exemple, une largeur de l'image. Fonctionne avec 3.2.2
margin: 0 auto; - suffisamment de place à la marge de gauche + marge de droite

InformationsquelleAutor Sender

54

Simplement ajouter la ligne suivante à votre fichier CSS spécifique. L'édition de Bootstrap, fichiers CSS directement n'est pas recommandé et annule votre capacité à utiliser un CA.
```
.center-block {
    float: none !important
}
```
Pourquoi?

Bootstrap CSS (version 3.7 et inférieur) utilise margin: 0 auto;, mais elle est remplacée par le flotteur de la propriété de la taille du conteneur.

PS:

Après l'ajout de cette classe, n'oubliez pas de définir des classes par le bon ordre.
```
<div class="col-md-6 center-block">Example</div>
```
- Seulement faite .centre-bloc de travailler en faisant comme cette réponse.
- Je suis en utilisant Bootstrap 3.3.7 et c'est la seule méthode de travail pour moi!
- les travaux de cette. mais ne pensez pas que !important est nécessaire
- P. Votre droit, mais... qui dépend de la charge de l'ordre et j'ai voulu fournir une méthode infaillible.
InformationsquelleAutor Sagive SEO
39

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 êtes toujours à l'aide de 2.X puis juste ajouter ceci dans votre CSS.
- ce serait probablement vous donner l'effet désiré le plus facile. Également jeter de largeur sur le .centré classe ou en ajouter une seconde classe, si vous allez pour une approche plus modulaire
- L'ajout d'float: none; pour .centré permet de déplacer la classe dans le récipient. garde le code plus propre
- ne pouvez pas l'utiliser sur une colonne, parce que personne ne float:none;
InformationsquelleAutor Schmalzy
34

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

Vous avez juste à ajouter la classe CSS 'centré' à 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/
- C'est la seule réponse qui a travaillé à 100% du temps - Les autres ont travaillé, mais pas quand bootstrap est passé à l'affichage mobile (les éléments ont été déplacés vers le côté gauche).
- Cela a été le seul qui a travaillé moi aussi .centre-bloc ne fonctionne que pour une colonne et j'ai besoin de centre de toutes les colonnes de l'indépendant de la façon dont beaucoup de qu'il est.
- Seule solution qui a fonctionné pour moi aussi. D'autres ne fonctionnait que lorsque le navigateur a été d'une fenêtre, (pas de plein écran).
InformationsquelleAutor Steffi
25

Bootstrap de la version 3 a une .texte-centre de classe.

Il suffit d'ajouter cette classe:
```
text-center
```
Il suffit de 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>   
```
- Clarifier les modalités de cette classe seront-ils ajoutés?
- Salut @aksu, vous n'avez pas à ajouter de tout .css. Regardez l'exemple fourni.
InformationsquelleAutor RustyIngles
20

Avec Bootstrap v4, cela peut être fait simplement en ajoutant .justify-content-center à la .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

InformationsquelleAutor joknawe
14

Cela fonctionne. Un hackish façon, sans doute, mais il fonctionne très bien. Il a été testé pour répondre (Y).
```
.centered {
    background-color: teal;
    text-align: center;
}
```
- ne fonctionne que parce que l'élément a afficher en ligne. Un img peut être défini comme un bloc.
- Mais ça fonctionne et je ne vois pas de raison d'en bas de vote.
- Peut-être dans votre isolé cas d'essai. Je voudrais ajouter .centered img { display: inline; } pour votre réponse et puis il serait digne d'un vote à la place.
- Pas de problème. Je suis sûr que l'OP va trouver sa réponse 🙂
- dans le bootstrap 3, la .texte-centre de classe fait la même chose en mode natif, comme je l'ai appris ci-dessus.
InformationsquelleAutor Ali Gajani

Simplement une colonne qui affiche le contenu de col-xs-12 (mobile-première 😉 et configurer le conteneur uniquement pour contrôler la façon dont vous voulez l'échelle de votre centrée sur le contenu, donc:

CSS:

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

HTML:

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

HTML:

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

InformationsquelleAutor Kieran Ryan

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

InformationsquelleAutor wali

Vous pouvez utiliser text-center pour la ligne et de vous assurer de l'intérieur divs 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/

InformationsquelleAutor Alireza Fattahi

Au centre de la col - nous besoin d'utiliser le code ci-dessous. cols sont le vagabond des éléments en dehors de la marge de l'auto. Nous allons également mettre à flotter aucun,

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

Au centre de la ci-dessus col-lg-1 avec la classe de centré, nous allons écrire:

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

De centrer le contenu à l'intérieur de la div, l'utilisation text-align:center,

.centered {
    text-align: center;
}

Si vous voulez centrer uniquement sur l'ordinateur de bureau et un écran plus grand, pas sur mobile, puis utilisez la commande suivante media query.

@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;
    }
}

InformationsquelleAutor Aamer Shahzad

5

Ce n'est probablement pas la meilleure réponse, mais il y a une solution créative à ce. Comme l'a souligné koala_dev la colonne de compensation ne fonctionne que pour la même taille de colonne. Cependant, par l'imbrication des lignes vous pouvez obtenir le centrage inégale des colonnes ainsi.

Pour coller avec la question de départ où vous voulez centrer une colonne de 1 à l'intérieur d'une grille de 12.
1. Centre une colonne de 2 par compensation il 5
2. Faire un imbriquée ligne, de sorte que vous obtenez une nouvelle 12 colonnes à l'intérieur de votre 2 colonnes.
3. Puisque vous voulez le centre d'une colonne de 1, et 1 "moitié" de 2 (ce que nous avons centré dans l'étape 1), vous devez maintenant au centre d'une colonne de 6 dans vos lignes imbriquées, qui se fait facilement par un système de compensation 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 wrap.

InformationsquelleAutor reinder
5

Une autre approche de la compensation est de disposer de 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>
```
- 2 inutile vrd, col-md-offset-* est mieux
- Je suis d'accord. J'ai utilisé cette méthode car elle fonctionne réellement bien et testé.
InformationsquelleAutor LeRoy
4

Nous pouvons atteindre cet objectif en utilisant la disposition de table mécanisme:

Le mécanisme est:
1. Envelopper toutes les colonnes dans un div.
2. Faire des div que d'une table avec une disposition fixe.
3. Faire de chaque colonne d'une cellule de tableau.
4. Utiliser vertical-align propriété contrôle le contenu de la position.
L'exemple de la démo est ici

InformationsquelleAutor Mohan Dere

Ce n'est pas mon code, mais il fonctionne parfaitement (testé sur Bootstrap 3) et je n'ai pas de déconner avec le col-de décalage.

Démo:

CSS:

/* centered columns styles */

.col-centered {
  display: inline-block;
  float: none;
  /* inline-block space fix */
  margin-right: -4px;
  background-color: #ccc;
  border: 1px solid #ddd;
}

HTML:

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

c'est la solution de codepen.io/makrjean22/stylo/xEdKAK

InformationsquelleAutor Binar Web

3

Comme koala_dev utilisé dans son approche de 1, je préfère la méthode de la compensation au lieu de centre-bloc ou sur les bords, ce qui a limité l'usage, mais comme il a mentionné:

Maintenant, il ya un inconvénient évident de cette méthode, il ne fonctionne que pour la même taille de colonne, de sorte que seule .col-X-2, .col-X-4, col-X-6, col-X-8 et le col-X-10 sont pris en charge.

Cela peut être résolu en utilisant l'approche suivante pour impair de colonnes.
```
<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        //Your content here
    </div>
</div>
```
InformationsquelleAutor Abhinav Singh
3

Vous pouvez utiliser la solution très flexible flexbox pour votre fichier d'Amorçage.
```
justify-content: center;
```
pouvez centrer votre colonne.

Découvrez flex.

InformationsquelleAutor Harsh

Parce que je n'ai jamais eu la nécessité de centrer un seul .col- dans un .row, j'ai mis la classe suivante sur l'emballage .row de ma cible colonnes.

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

InformationsquelleAutor Walter Roman

Pour ceux qui cherchent à centre de la colonne, des éléments sur l'écran quand vous n'avez pas le nombre exact de 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 voulez avoir 3 par ligne sur un md écran, vous faites cela:

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, le second argument doit être divisible par 12.

InformationsquelleAutor jsgoupil

De centre de plus d'une colonne dans un fichier d'amorce de la ligne et le nombre de cols sont impairs, il suffit d'ajouter cette css classe pour toutes les colonnes de la 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;
}

Dans votre code HTML que 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>

InformationsquelleAutor Ruto Collins

2

Essayer 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é le col-lg-1, et le décalage doit être de 10 pour bien centrés, la div sur les gros appareils. Si vous avez besoin d'un centre de taille moyenne à grande périphériques alors il suffit de changer le lg md et ainsi de suite.

InformationsquelleAutor Bangash

Bootstrap 4 solution:

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

InformationsquelleAutor JanBrus

1

Si vous mettez cela sur votre ligne, toutes les colonnes à l'intérieur sera centrée sur:
```
.row-centered {
    display: flex;
    justify-content: space-between;
}
```
- faites l'élément non conforme.
InformationsquelleAutor Eran Shabi
1

Essayer cette
```
<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>
```
Vous pouvez utiliser d'autres col ainsi comme col-md-2, etc.

InformationsquelleAutor UmarJamil

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 des Conseils, des exemples et des outils: OnAirCode

InformationsquelleAutor Pacific P. Regmi

Je suggère tout simplement à utiliser la classe text-center:

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

InformationsquelleAutor Dadhich Sourav

1

Pour être plus précis du Bootstrap système de grille contient 12 colonnes et au centre de tout contenu, disons, par exemple, le contenu prend une colonne. On aura besoin d'occuper deux colonnes de Bootstrap grille 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' est à dire le système de grille par où commencer, placez le contenu.

col-xs-2' est à dire le système de grille de la façon dont beaucoup de la gauche sur les colonnes, le contenu occuper.

'centré' sera une classe définie qui permettra de centrer le contenu.

Ici est de savoir comment cet exemple ressemble à du Bootstrap système de grille.

Colonnes:

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

.......décalage....... .données. .......pas utilisé........

InformationsquelleAutor Tech
1

Ajouter l'extrait de code suivant à l'intérieur de votre .de ligne ou de votre .col. C'est pour Bootstrap 4*.
```
d-flex justify-content-center
```
InformationsquelleAutor Thomas Chirwa

Utilisation mx-auto dans votre div class en utilisant Bootstrap 4.

<div class="container">
  <div class="row">
    <div class="mx-auto">
      You content here
    </div>
  </div>
</div>

InformationsquelleAutor Bruno M

Avec bootstrap 4 vous pouvez simplement essayer de 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>

Centre une colonne en utilisant Twitter Bootstrap 3

C'est la bonne réponse du 19 juin 2019.

InformationsquelleAutor Hossein Narimani Rad

0

N'oubliez pas d'ajouter !important. Ensuite, vous pouvez être sûr que l'élément sera vraiment dans le centre:
```
.col-centered{
  float: none !important;
  margin: 0 auto !important;
}
```
InformationsquelleAutor Boomerange
-1

Remarque si vous êtes en utilisant Bootstrap 4, vous pouvez utiliser .align-items-center dans votre row comme Bootstrap 4 utilise maintenant le système flex.
- Re "le système flex": voulez-vous dire CSS Flexbox?
- je voulais dire ce getbootstrap.com/docs/4.0/layout/grid
InformationsquelleAutor Kelok Chan

Vous devez vous connecter pour publier un commentaire.

Approche 1 (décalages):

Approche 2 (l'ancien margin:auto)

Mise à jour 2018

HTML:

CSS:

Nous pouvons atteindre cet objectif en utilisant la disposition de table mécanisme:

L'exemple de la démo est ici

Approche 2 (l'ancien `margin:auto`)