web-dev-qa-db-fra.com

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

y at-il un moyen de centrer les éléments HTML verticalement ou horizontalement à l'intérieur des parents principaux?

csstwitter-bootstrap
278
itsme

Mise à jour : cette réponse était probablement correcte au début de 2013, mais elle ne devrait plus être utilisée. La solution appropriée tilise les compensations .

En ce qui concerne la suggestion des autres utilisateurs, il existe également des classes natives bootstrap telles que:

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

grâce à @Henning et @trejder

240
itsme

Depuis le documentation Bootstrap :

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

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

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, ceci 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 classe img-responsive ajoute une instruction display:block à la balise image, qui arrête le fonctionnement de text-align:center (text-center classe).

SOLUTION:

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

jsFiddle of the solution

L'ajout de la classe center-block annule l'instruction display:block insérée à l'aide de la classe img-responsive.

Sans la classe img-responsive, l'image serait centrée simplement en ajoutant text-center class

Mise à jour:

En outre, vous devez connaître les bases de flexbox et comment l’utiliser, puisque Bootstrap4 l’utilise maintenant de manière native .

Voici un excellent, rapide tutoriel vidéo par Brad Schiff

Voici un excellent aide-mémoire

53
cssyphus

Mis à jour en 2018

Dans Bootstrap 4 , les méthodes de centrage ont été modifiées.

Centre horizontal dans BS4

  • text-center est toujours utilisé pour les éléments display:inline
  • mx-auto remplace center-block pour centrer display:flex enfants
  • offset-* ou mx-auto peut ê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

29
Zim

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

je l'utilise

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

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

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

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

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

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

et

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

5
xander-miller

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

4
alvseek

pour bootstrap4 centre vertical de quelques éléments

d-flex pour les règles de flex

flex-column pour la direction verticale des éléments

justifier-contenu-centre pour le centrage

style = 'hauteur: 300px;' doit avoir pour points de réglage où le centre est calculé ou utilisé h-100 classe

<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>
0
Ramil Gilfanov

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

centre horizontal est bien text-center class

centre vertical Toutefois, l'utilisation de bootstrap classes ajoute les deux mb-auto mt-auto de sorte que margin-top et margin bottom soient réglés sur auto.

0
online Thomas