Question alignement vertical avec Bootstrap 3


J'utilise Twitter Bootstrap 3, et j'ai des problèmes quand je veux aligner verticalement deux div, par exemple - JSFiddle lien:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Le système de grille dans Bootstrap utilise float: left, ne pas display:inline-block, donc la propriété vertical-align ne fonctionne pas. J'ai essayé d'utiliser margin-top pour le réparer, mais je pense que ce n'est pas une bonne solution pour le design réactif.


753
2017-12-12 15:43


origine


Réponses:


Cette réponse présente un hack, mais je vous recommande fortement d'utiliser flexbox (comme indiqué dans @Haschem réponse), puisqu'il est maintenant supporté partout.

Lien de démonstration: 
  - Bootstrap 3 
  - Bootstrap 4 alpha 6 

Vous pouvez toujours utiliser une classe personnalisée lorsque vous en avez besoin:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

En utilisant inline-block ajoute un espace supplémentaire entre les blocs si vous laissez un espace réel dans votre code (comme ...</div> </div>...). Cet espace supplémentaire brise notre grille si la taille des colonnes est de 12:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Ici, nous avons des espaces supplémentaires entre <div class="[...] col-lg-2"> et <div class="[...] col-lg-10"> (un retour chariot et 2 onglets / 8 espaces). Et donc...

Enter image description here

Battons cet espace supplémentaire !!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Enter image description here

Notez le apparemment commentaires inutiles <!-- ... -->? Elles sont important - sans eux, l'espace entre le <div> les éléments prendront de l'espace dans la disposition, brisant le système de grille.

Note: le Bootply a été mis à jour


836
2017-12-12 16:17



Disposition flexible de la boîte

Avec l'avènement du CSS Flexible Box, beaucoup de cauchemars de designers web1 ont été résolus. L'un des plus hacky, l'alignement vertical. Maintenant, il est possible même dans hauteurs inconnues.

"Deux décennies de hacks de mise en page arrivent à leur fin.   mais bientôt, et pour le reste de notre vie. "

- CSS Legendary Eric Meyer à W3Conf 2013

Flexible Box (ou, en un mot, Flexbox), est un nouveau système de mise en page spécialement conçu pour la mise en page. le états de spécification:

La disposition Flex est superficiellement similaire à la disposition des blocs. Il manque beaucoup de   les propriétés plus centrées sur le texte ou le document qui peuvent être utilisées   en mode bloc, tels que les flottants et les colonnes. En retour, il gagne simple   et des outils puissants pour distribuer l'espace et aligner le contenu de différentes manières   que les webapps et les pages web complexes ont souvent besoin.

Comment cela peut-il aider dans ce cas? Voyons voir.


Colonnes alignées verticalement

En utilisant Twitter Bootstrap nous avons .rows avoir quelques .col-*s. Tout ce que nous devons faire est d'afficher le .row2 comme un conteneur flexible boîte et ensuite aligner tous ses élément flexibles (les colonnes) verticalement par align-items propriété.

EXEMPLE ICI  (S'il vous plaît lire les commentaires avec soin)

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>
.vertical-align {
    display: flex;
    align-items: center;
}

Le résultat

Vertical aligned columns in Twitter Bootstrap

La zone colorée affiche la zone de remplissage des colonnes.

Clarifier sur align-items: center

8.3 Alignement transversal: le align-items propriété

Éléments Flex peut être aligné dans le axe transversal de la ligne actuelle du conteneur flexible, similaire à justify-contentmais dans la direction perpendiculaire. align-items définit l'alignement par défaut pour tous les éléments du conteneur Flex, y compris les éléments anonymes éléments flexibles.

align-items: center;   Par valeur centrale, le élément flexibleLa marge de la boîte est centrée dans le axe transversal dans la ligne.


Grande alerte

Note importante # 1: Twitter Bootstrap ne spécifie pas le width des colonnes dans des dispositifs extra petits, sauf si vous donnez l'un des .col-xs-# classes aux colonnes.

Par conséquent, dans cette démo particulière, j'ai utilisé .col-xs-* classes afin que les colonnes s'affichent correctement en mode mobile, car elle spécifie width de la colonne explicitement.

Mais alternativement vous pourriez éteindre la mise en page Flexbox simplement en changeant display: flex; à display: block; dans des tailles d'écran spécifiques. Par exemple:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

Ou vous pourriez spécifier .vertical-align  seulement sur des tailles d'écran spécifiques ainsi:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

Dans ce cas, j'irais avec @KevinNelsonde approche.

Note importante n ° 2: Les préfixes du fournisseur ont été omis en raison de la brièveté. La syntaxe Flexbox a été modifiée au cours du temps. La nouvelle syntaxe écrite ne fonctionnera pas sur les anciennes versions des navigateurs Web (mais pas si ancienne qu'Internet Explorer 9! Flexbox est pris en charge sur Internet Explorer 10 et versions ultérieures).

Cela signifie que vous devez également utiliser des propriétés préfixées par le fournisseur, telles que display: -webkit-box et ainsi de suite en mode production.

Si vous cliquez sur "Basculer vue compilée" dans le Démo, vous verrez la version préfixée des déclarations CSS (merci à Autoprefixer).


Colonnes pleine hauteur avec contenu aligné verticalement

Comme vous le voyez dans le démo précédente, les colonnes (les éléments flexibles) ne sont plus aussi élevées que leur conteneur (la boîte de conteneur flexible, c'est-à-dire .row élément).

C'est à cause de l'utilisation center la valeur pour align-items propriété. La valeur par défaut est stretch de sorte que les éléments peuvent remplir toute la hauteur de l'élément parent.

Afin de résoudre ce problème, vous pouvez ajouter display: flex; aux colonnes aussi:

EXEMPLE ICI  (Encore une fois, faites attention aux commentaires)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

Le résultat

Full-height columns with vertical aligned contents in Twitter Bootstrap

La zone colorée affiche la zone de remplissage des colonnes.

Enfin et surtout, notez que les démos et les extraits de code ici sont destinés à vous donner une idée différente, à fournir une approche moderne pour atteindre l'objectif. S'il vous plaît, faites attention au "Grande alerte"section si vous allez utiliser cette approche dans des sites ou des applications du monde réel.


Pour plus d'informations, y compris le support du navigateur, ces ressources seraient utiles:


1. Aligner verticalement une image à l'intérieur d'une div avec une hauteur réactive 2. Il est préférable d'utiliser une classe supplémentaire afin de ne pas modifier le défaut de Twitter Bootstrap .row.


803
2017-08-27 00:09



Le code ci-dessous a fonctionné pour moi:

.vertical-align {
    display: flex;
    align-items: center;
}

27
2017-10-01 15:01



Essayez ceci dans le CSS de la div:

display: table-cell;
vertical-align: middle;

23
2017-12-12 16:20



Suite à la réponse acceptée, si vous ne souhaitez pas personnaliser le balisage, pour la séparation des préoccupations ou simplement parce que vous utilisez un CMS, la solution suivante fonctionne bien:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

La limitation ici est que vous ne pouvez pas hériter de la taille de la police de l'élément parent car la ligne définit la taille de la police à 0 afin de supprimer les espaces.


20
2018-01-27 09:11



Je pensais partager ma "solution" au cas où cela aiderait quelqu'un d'autre qui ne connaît pas les requêtes @media.

Grâce à la réponse de @ HashemQolami, j'ai construit des requêtes média qui fonctionneraient comme des col- * classes pour que je puisse empiler le col- * pour mobile mais les afficher verticalement au centre pour des écrans plus grands, par ex.

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

Les mises en page plus compliquées qui nécessitent un nombre différent de colonnes par résolution d'écran (par exemple 2 lignes pour -xs, 3 pour -sm, et 4 pour -md, etc.) nécessiteraient un finagling plus avancé, mais pour une page simple avec -xs empilé et -sm et plus grand dans les rangées, cela fonctionne bien.


19
2018-01-05 00:05



Je préfère cette méthode selon David Walsh Centre vertical CSS:

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

le transform n'est pas essentiel; il trouve juste le centre un peu plus précis. Internet Explorer 8 est peut-être un peu moins centré, mais ce n'est pas mal - Puis-je utiliser - Transforms 2d.


16
2018-02-14 19:21



Je l'ai juste fait et il fait ce que je veux qu'il fasse.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

Et maintenant ma page ressemble à

<div class='container-fluid align-middle'>
    content

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------

13
2018-05-31 23:13



Mise à jour 2018

Je sais que la question initiale était pour Bootstrap 3, mais maintenant que Bootstrap 4 a été publié, voici quelques conseils mis à jour sur le centre vertical.

Important!  Le centre vertical est relatif à la taille du parent

Si le parent de l'élément que vous essayez de centrer n'a pas défini    la taille, aucun des solutions de centrage vertical va fonctionner!

Bootstrap 4

Maintenant que BS4 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>

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

BS4 - Colonnes verticales 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>

BS4 - Centre vertical utilisant des utilitaires d'affichage Démo

Regarde aussi: Centre d'alignement vertical dans Bootstrap 4


Bootstrap 3

Méthode Flexbox sur le conteneur de l'article (s) à centrer:

.display-flex-center {
    display:flex;
    align-items:center;
}

Transformer la méthode translateY:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Afficher la méthode en ligne:

.display-inline-block {
    display:inline;
}
.display-inline-block > div {
    display:inline-block;
    float:none;
    vertical-align: middle;
}

Démonstration de Bootstrap 3 méthodes de centrage


12
2018-03-21 12:14



Je trouve vraiment le code suivant fonctionne en utilisant Chrome et pas d'autres navigateurs que la réponse actuellement sélectionnée:

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Bootply Lien

Vous devrez peut-être modifier les hauteurs (en particulier sur .v-center) et supprimer / changer div div[class*='col-'] pour vos besoins.


9
2017-07-12 19:57