Twitter Bootstrap - comment centrer les éléments horizontalement ou verticalement

285

existe-t-il un moyen de centrer les éléments html verticalement ou horizontalement à l'intérieur des parents principaux?

css twitter-bootstrap

— c'est moi
source

2

Ceci est un excellent article sur le centrage horizontal et vertical: Voir ici

— markvandencorput

2

Moi aussi, j'étais confronté à un problème d'alignement horizontal; J'ai simplement utilisé le <center></center>tag

— Utpal - Ur Best Pal

4

@ Utpal-UrBestPal la <center>balise a été dépréciée il y a environ 12 ans.

— Niels Keurentjes

246

Mise à jour : bien que cette réponse était probablement correcte au début de 2013, elle ne devrait plus être utilisée. La solution appropriée utilise des décalages .

Comme pour la suggestion d'autres utilisateurs, il existe également des classes d'amorçage natives comme:

class="text-center"
class="pagination-centered"

merci à @Henning et @trejder

— c'est moi
source

22

Le même style est déjà contenu dans Bootstrap; il suffit d'utiliserclass="text-center"

— Henning

3

Ou .pagination-centeredcomme alternative.

— trejder

7

Cela devrait être la réponse, les autres ignorent toute la partie 'in bootstrap' de la question.

— Ryan McDonough

1

@RyanMcDonough ouais en fait, cela fait rire toutes les autres personnes suggérées, j'ai donc vérifié comme réponse ok?

— itsme

1

L'utilisation text-centerpour la mise en page est une très mauvaise pratique. La bonne façon d'aligner les colonnes dans Bootstrap est d'utiliser des col-XX-offset-Yclasses. getbootstrap.com/css/#grid-offsetting . Cette réponse était probablement correcte en 2013 mais ne devrait plus être utilisée aujourd'hui.

— Niels Keurentjes

76

Dans la documentation Bootstrap :

Définissez un élément sur display: blocket centrez via margin. Disponible en mixin et en classe.

<div class="center-block">...</div>

— m0000g
source

55

Pour les futurs visiteurs de cette question:

Si vous essayez de centrer une image dans un div mais que l'image ne se centre pas, cela pourrait décrire votre problème:

jsFiddle DEMO du problème

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

La img-responsiveclasse ajoute une display:blockinstruction à la balise image, ce qui empêche text-align:center( text-centerclasse) de fonctionner.

SOLUTION:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

L'ajout de la center-blockclasse remplace l' display:blockinstruction insérée à l'aide de la img-responsiveclasse.

Sans la img-responsiveclasse, l'image se centrerait simplement en ajoutant de la text-centerclasse

Mettre à jour:

De plus, vous devez connaître les bases de flexbox et comment l'utiliser, puisque Bootstrap4 l'utilise désormais de manière native .

Voici un excellent tutoriel vidéo au rythme rapide par Brad Schiff

Voici une grande feuille de triche

— cssyphus
source

32

Mise à jour 2018

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

Centre horizontal dans BS4

text-centerest toujours utilisé pour les display:inlineéléments
mx-autoremplace center-blockpour centrer les display:flexenfants
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 diverses 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

30

Vous pouvez écrire directement dans votre fichier css comme ceci:

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

<div class = "content" >
  
   <p> some text </p>
  </div>

Développer l'extrait

— kirgiz_jigit
source

9

j'utilise ceci

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

— atabak
source

1

Ne fonctionne pas dans certains cas (voir le commentaire sur essentiellement la même réponse et n'utilise pas de classes spécifiques à Bootstrap pour le centrage .

— Dan Dascalescu

7

pour un centrage horizontal, vous pouvez avoir quelque chose comme ceci:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>

— PersianMan
source

4

Ne fonctionne pas (du moins pas dans la mise en œuvre actuelle), lorsqu'il est directement utilisé dans une image: <img src="img/logo.png" style="float:none; margin:0 auto" />. Entourer imgdes parents divet donner .text-centerou donner des .pagination-centeredcours aux parents fonctionne comme un charme.

— trejder

2

pour centrer un élément avec marge: 0 auto, vous devez ajouter une largeur à cet élément. Dans l'exemple ci-dessus, aucune largeur n'est spécifiée car span8 a une largeur dans boobstrap mais votre image ne le fait pas <img src = "img / logo.png" style = "float: none; margin: 0 auto; width: 300px" /> centrera horizontalement cette image à l'intérieur du parent

— Raul

2

Cela ignore la partie "Bootstrap" de la question.

— Dan Dascalescu

5

J'aime cette solution à partir d'une question similaire. https://stackoverflow.com/a/25036303/2364401 Utilisez la text-centerclasse bootstraps sur les données de table réelles <td>et les <th>éléments d' en-tête de table . Alors

<td class="text-center">Cell data</td>

et

<th class="text-center">Header cell data</th>

— xander-miller
source

5

Avec bootstrap 4, vous pouvez utiliser flex

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

source: bootstrap 4.1

— alvseek
source

3

bootstrap 4 + Flex résoudre ce problème

vous pouvez utiliser

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

Développer l'extrait

il doit être centré horizontalement et verticalement

— taoufiqaitali
source

0

J'ai découvert dans Bootstrap 4 que vous pouvez faire ceci:

centre horizontal est en effet text-centerclasse

center vertical cependant, l'utilisation de classes bootstrap ajoute les deux mb-auto mt-autoafin que margin-top et margin bottom soient définis sur auto.

— en ligne Thomas
source

0

pour bootstrap4 centre vertical de quelques articles

d-flex pour les règles flex

colonne flexible pour la direction verticale sur les articles

centre de contenu de justification pour le centrage

style = 'height: 300px;' doit avoir pour les points de consigne où le centre doit être calculé ou utiliser la classe h-100

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>

— Ramil Gilfanov
source