Question Comment obtenez-vous du contenu centré en utilisant Twitter Bootstrap?


J'essaie de suivre un exemple très basique. En utilisant le page de démarrage et le système de grille, J'espérais ce qui suit:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... produirait du texte centré.

Cependant, il apparaît toujours à l'extrême gauche. Qu'est-ce que je fais mal?


518
2018-02-07 21:21


origine


Réponses:


Ceci est pour le centrage de texte (quelle est la question était sur)

Pour les autres types de contenu, voir La réponse de Flavien.

Mise à jour: Bootstrap 2.3.0+ Réponse

La réponse originale était pour une version antérieure de bootstrap. À partir du bootstrap 2.3.0, vous pouvez simplement donner la div la classe .text-center.


Réponse originale (avant 2.3.0)

Vous devez définir l'une des deux classes, row ou span12 avec un text-align: center. Voir http://jsfiddle.net/xKSUH/ ou http://jsfiddle.net/xKSUH/1/


649
2018-02-07 21:43



NOTE: c'était enlevé dans Bootstrap 3.


Pre-Bootstrap 3, vous pouvez utiliser la classe CSS pagination-centered comme ça:

<div class="span12 pagination-centered">
    Centered content.
</div>

Classe pagination-centered est déjà dans bootstrap.css (ou bootstrap.min.css) et a la seule règle:

.pagination-centered{text-align:center;}

Avec Bootstrap 2.3.0. juste utiliser la classe text-center


239
2017-07-05 09:42



Je suppose que la plupart des gens sont en train de chercher le moyen de centre le tout div et pas seulement le contenu du texte (ce qui est trivial ...).

La deuxième manière (au lieu d'utiliser text-align: center) pour centrer les choses en HTML consiste à avoir un élément avec une largeur et une marge automatiques fixes (gauche et droite). Avec Bootstrap, le style définissant les marges automatiques est la classe "conteneur".

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

Jetez un oeil ici pour un violon: http://jsfiddle.net/D2RLR/7788/


147
2017-10-27 10:10



Bootstrap 3.1.1 a un .center-block classe pour centrer divs. Voir: http://getbootstrap.com/css/#helper-classes-center.

Centrer les blocs de contenu Définir un élément sur display: block et centrer via margin. Disponible en mixin et en classe.

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

Ou, comme d'autres l'ont déjà dit, utilisez le .text-center classe au centre du texte.


35
2018-05-22 12:24



La meilleure façon de le faire est de définir un style CSS:

.centered-text {
    text-align:center
}    

Alors là où vous avez besoin de texte centré, vous l'ajoutez comme ceci:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

ou si vous voulez juste le tag p centré:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

Les css moins en ligne que vous utilisez le mieux.


28
2018-06-10 16:58



Mise à jour 2018 - Bootstrap 4

Le "contenu centré" peut signifier beaucoup de choses différentes, et le centrage Bootstrap a beaucoup changé depuis la publication initiale.

Centre horizontal

Bootstrap 3

  • text-center est utilisé pour display:inline éléments
  • center-block au centre display:block éléments
  • col-*offset-* Centrer les colonnes de la grille
  • voir cette réponse Centrer la barre de navigation

Demo Bootstrap 3 Centrage horizontal

Bootstrap 4

  • text-center est encore utilisé pour display:inline éléments
  • mx-auto remplace center-block au centre display:block éléments
  • offset-*  ou  mx-auto peut être utilisé pour centrer les colonnes de la grille
  • justify-content-center dans row peut également être utilisé pour centrer col-* 

mx-auto (les marges automatiques de l'axe x) seront centrées display:block ou display:flex éléments qui ont un largeur définie, (%, vw, px, etc..). Flexbox est utilisé par défaut sur les colonnes de la grille, il existe donc différentes méthodes de centrage flexbox.

Démo Bootstrap 4 Centrage horizontal


Centre vertical

Maintenant que Bootstrap 4 est flexbox par défaut il existe de nombreuses approches différentes de l'alignement vertical en utilisant: marges automatiques, utilitaires flexbox, ou la afficher les utilitaires de même que utilitaires d'alignement vertical. Au début, "align aligns utils" semble évident mais ces seulement travailler avec des éléments d'affichage en ligne et de table. Voici quelques options de centrage vertical Bootstrap 4.


1 - Centre vertical utilisant les marges automatiques:

Une autre façon de centrer verticalement est d'utiliser my-auto. Cela va centrer l'élément dans son conteneur. Par exemple, h-100 fait le rang toute la hauteur, et my-auto va centrer verticalement le col-sm-12 colonne.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Centre vertical utilisant les marges automatiques Démo

my-auto représente les marges sur l'axe y vertical et est équivalent à:

margin-top: auto;
margin-bottom: auto;

2 - Centre vertical avec Flexbox:

vertical center grid columns

Depuis Bootstrap 4 .row est maintenant display:flex vous pouvez simplement utiliser align-self-center sur n'importe quelle colonne pour le centrer verticalement ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Ou utiliser align-items-center sur l'ensemble .row à aligner verticalement tout le centre col-* dans la rangée...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Centre vertical Colonnes de hauteur différente Démo


3 - Centre vertical utilisant les outils d'affichage:

Bootstrap 4 a afficher les utilitaires qui peut être utilisé pour display:table, display:table-cell, display:inline, etc .. Ceux-ci peuvent être utilisés avec le utilitaires d'alignement vertical aligner des éléments de cellule en ligne, en ligne ou de table.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Centre vertical à l'aide des outils d'affichage Démo


23
2018-02-27 10:43



En Février 2013, dans certains cas, j'ajoute une classe "centrée" à la div "span":

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

et CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

La raison en est que les span * div sont flottants vers la gauche et que la technique de centrage "marge automatique" ne fonctionne que si la div n'est pas flottante.

Démo (sur JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/


13
2018-02-26 08:34



La classe .show-grid applique un texte aligné au centre dans l'exemple du lien.

Vous pouvez toujours ajouter style="text-align:center" à votre div div ou une autre classe, je penserais.


12
2018-02-07 21:37



Si vous utilisez Bootstrap 3, il a également une classe CSS intégrée nommée .text-centre. C'est ce que tu veux.

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

S'il vous plaît voir l'exemple dans jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/


9
2017-10-24 02:26



Bootstrap 2.3 a un text-center classe.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

8
2018-02-14 17:18