alignement vertical avec Bootstrap 3


889

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

<!-- 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 de Bootstrap utilise float: left, non display:inline-block, donc la propriété vertical-alignne fonctionne pas. J'ai essayé margin-topde le réparer, mais je pense que ce n'est pas une bonne solution pour la conception réactive.


1
non non, je veux aligner verticalement le 2 div, pas le texte à l'intérieur, quelque chose comme ça jsfiddle.net/corinem/Aj9H9 mais dans cet exemple je n'utilise pas bootstrap
corinem


6
IMPORTANT: les deux colonnes ont besoin de la classe "vcenter". Sinon, cela ne fonctionnera pas. Passé une heure une heure maintenant juste à comprendre cela.
Cymro

aucune des réponses ne fonctionne parfaitement sur chrome IE8 et mobile pour moi avec une ligne contenant 5 col- (et 3 col- sur mobile)
amdev

Dans Bootstrap 4, l'alignement central vertical est très différent: stackoverflow.com/a/41464397/171456
Zim

Réponses:


938

Cette réponse présente un hack, mais je vous recommande fortement d'utiliser Flexbox (comme indiqué dans la réponse @Haschem ), car elle est désormais prise en charge partout.

Lien démos:
- 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

L'utilisation inline-blockajoute de l'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 s'élève à 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 tabulations / 8 espaces). Et donc...

Entrez la description de l'image ici

Lançons 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>

Entrez la description de l'image ici

Remarquez les commentaires apparemment inutiles <!-- ... -->? Ils sont importants - sans eux, les espaces entre les <div>éléments prendront de la place dans la disposition, brisant le système de grille.

Remarque: le Bootply a été mis à jour


18
Cela se casse si vous spécifiez des grilles de colonnes totalisant jusqu'à 12 (par exemple, en utilisant col-lg-2et col-lg-10). Fait intéressant, si vous ajoutez le code JS suivant (en supposant jQuery), il parvient à se réparer:$('.row').html($('.vcenter'));
Jake Z

8
@pasemes Ceci est dû à l' inline-block espace supplémentaire (bien connu) . Je donne une solution dans mon montage.
zessx

92
La partie avec les commentaires vierges ressemble à une magie profonde, sombre et maléfique. Et c'est. Mais quelqu'un quelque part a décidé que cela devrait fonctionner, alors c'est le cas.
cfstras

5
Surpris, personne ne l'a encore mentionné mais, au lieu des commentaires, vous pouvez définir "font-size: 0;" sur le parent des divs en ligne pour supprimer "l'espace mystère"
Poff

4
Il n'est pas nécessaire d'utiliser un commentaire html <! - -> ou un code javascript pour résoudre le problème d'espace supplémentaire, il existe une astuce CSS simple et efficace: les marges négatives. Ajoutez juste margin-right: -4px; à la classe .vcenter. Testé et fonctionnant avec tous les navigateurs (à l'exception des anciens IE6 et IE7 ... mais qui se soucie de la préhistoire;))
Frank

897

Disposition flexible des boîtes

Avec l'avènement de la CSS Flexible Box , de nombreux cauchemars de concepteurs Web 1 ont été résolus. L'un des plus hackeux, l'alignement vertical. Maintenant, c'est possible même dans des hauteurs inconnues .

"Deux décennies de hacks de mise en page touchent à leur fin. Peut-être pas demain, mais bientôt, et pour le reste de nos vies."

- Le légendaire CSS Eric Meyer au W3Conf 2013

Flexible Box (ou en bref, Flexbox), est un nouveau système de mise en page spécialement conçu à des fins de mise en page. La spécification stipule :

La disposition flexible est superficiellement similaire à la disposition de bloc. Il manque de nombreuses propriétés plus complexes, centrées sur le texte ou le document, qui peuvent être utilisées dans la disposition des blocs, telles que les flottants et les colonnes. En retour, il gagne des outils simples et puissants pour distribuer l'espace et aligner le contenu de la manière dont les applications Web 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 .rowdes .col-*s. Tout ce que nous devons faire est d'afficher le .row2 souhaité comme une boîte de conteneur flexible , puis d'aligner verticalement tous ses éléments flexibles (les colonnes) par align-itemspropriété.

EXEMPLE ICI (Veuillez lire attentivement les commentaires)

<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

Colonnes alignées verticalement dans Twitter Bootstrap

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

Clarification sur align-items: center

8.3 Alignement transversal: la align-itemspropriété

Les éléments flexibles peuvent être alignés dans l' axe transversal de la ligne actuelle du conteneur flexible, de manière similaire justify-contentmais perpendiculaire. align-itemsdéfinit l'alignement par défaut pour tous les éléments du conteneur flexible, y compris les éléments flexibles anonymes .

align-items: center; Par valeur centrale, la zone de marge de l' élément flexible est centrée dans l' axe transversal de la ligne.


Grande alerte

Remarque importante # 1: Twitter Bootstrap ne spécifie pas le nombre widthde colonnes dans les très petits appareils, sauf si vous donnez une des .col-xs-#classes aux colonnes.

Par conséquent, dans cette démo particulière, j'ai utilisé des .col-xs-*classes pour que les colonnes soient affichées correctement en mode mobile, car cela spécifie widthexplicitement la colonne.

Mais encore , vous pouvez désactiver l'Flexbox layout en changeant simplement display: flex;à display: block;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 pouvez spécifier .vertical-align uniquement sur des tailles d'écran spécifiques comme ceci:

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

Dans ce cas, je partirais avec @KevinNelson de l' approche .

Remarque importante n ° 2: les préfixes du fournisseur ont été omis en raison de la brièveté. La syntaxe de 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 aussi anciennes 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 comme display: -webkit-boxet ainsi de suite en mode production.

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


Colonnes pleine hauteur avec contenu aligné verticalement

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

Cela est dû à l'utilisation de la centervaleur pour la align-itemspropriété. La valeur par défaut est de stretchsorte que les éléments puissent remplir toute la hauteur de l'élément parent.

Pour résoudre ce problème, vous pouvez également ajouter display: flex;aux colonnes:

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

Colonnes pleine hauteur avec contenu aligné verticalement dans Twitter Bootstrap

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

Enfin, 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. Veuillez noter la section " Big Alert " si vous comptez utiliser cette approche dans des sites Web ou des applications du monde réel.


Pour une lecture plus approfondie, y compris la prise en charge du navigateur, ces ressources seraient utiles:


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


9
Après quelques recherches, j'ai trouvé que HTML5Please.com dit qu'il y a suffisamment de support pour l'utiliser. Donc c'est assez génial! html5please.com/#flexbox
Alec Moore

6
Il s'agit en fait de la meilleure solution et devrait bénéficier d'un soutien accru. Et bien sûr, nous, développeurs, devons l'utiliser autant que possible pour le propager.
Mateus Neves

12
J'ai essayé cela et ne fonctionnais pas pour moi de la manière attendue, jusqu'à ce que j'édite vos violons et que je réalise que c'est totalement inutile et une perte de temps. Faire cela manque complètement le point de la conception réactive, car les colonnes ne s'empileront plus l'une sur l'autre lorsqu'elles ne rentreront pas dans l'écran, rendant ainsi le besoin de bootstrap totalement inutile et rendant votre site insensible. Pour voir ce que je veux dire, changez n'importe quel col-xs- * en col-xs-12 dans les exemples respectifs, rendez l'écran de votre navigateur très petit (comme un appareil mobile) et voyez les résultats: plus de réactivité.
Pere

8
@HashemQolami bien que vous utilisiez des classes nommées col-*, vos violons / codepens n'utilisent pas le bootstrap, donc ils sont trompeurs. Vos exemples ne fonctionnent pas avec bootstrap; son système de grille n'est pas basé flex, ils sont donc incompatibles. Essayez simplement l'un de vos exemples dans une page propulsée par le bootstrap et vous vous rendrez compte qu'ils ne fonctionnent pas.
Pere

5
@Hashem Qolami ne trouve toujours aucun cas d'utilisation pour vos suggestions. L'une des principales caractéristiques distinctives de Bootstrap est que les colonnes s'empilent les unes sur les autres une fois qu'elles ne s'adaptent pas horizontalement. Cela n'arrive plus avec votre solution. Le système de grille fonctionne même si vous ne chargez que les styles, comme vous pouvez le voir dans ce violon . Pas de js; juste css. Modifiez la taille de la zone de rendu et il répondra. Cela ne se produit dans aucun de vos exemples. L'approche "mobile first" est perdue, ce qui rend Bootstrap inutile. Cette réponse est donc incorrecte, trompeuse ou incomplète.
Pere

48

Le code ci-dessous a fonctionné pour moi:

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

4
Solution la plus simple à
mon humble avis

3
Quelqu'un a une solution qui fonctionne avec une seule colonne? J'ai eu une rangée, puis à l'intérieur juste un col-md-6. Cette solution et les autres flexbox ne fonctionnent que lorsqu'il y a 2 colonnes
Ka Mok

36

Mise à jour 2020

Je sais que la question d'origine était pour Bootstrap 3, mais maintenant que Bootstrap 4 est sorti, voici quelques conseils mis à jour sur le centre vertical.

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

Si le parent de l'élément que vous essayez de centrer n'a pas de hauteur définie , aucune des solutions de centrage vertical ne fonctionnera!

Bootstrap 4

Maintenant que Bootstrap 4 est flexbox par défaut, il existe de nombreuses approches différentes de l'alignement vertical utilisant: les marges automatiques , les utilitaires flexbox ou les utilitaires d' affichage avec les utilitaires d'alignement vertical . Au premier abord, les «utilitaires d'alignement vertical» semblent évidents, mais ils ne fonctionnent qu'avec des éléments d'affichage en ligne et de table. Voici quelques options de centrage vertical Bootstrap 4.


1 - Centre vertical à l'aide des marges automatiques:

Une autre façon de centrer verticalement est d'utiliser my-auto. Cela centrera l'élément dans son conteneur. Par exemple, h-100rend la ligne pleine hauteur et my-autocentre verticalement la col-sm-12colonne.

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

Bootstrap 4 - Centre vertical utilisant la démonstration des marges automatiques

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

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

2 - Centre vertical avec Flexbox:

Colonnes verticales de la grille centrale

Puisque Bootstrap 4 .rowest maintenant, display:flexvous pouvez simplement l'utiliser align-self-centersur 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, utilisez align-items-centersur l'ensemble .rowpour aligner verticalement au centre tout 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>

Bootstrap 4 - Demo colonnes verticales de différentes hauteurs


3 - Centre vertical utilisant des outils d'affichage:

Bootstrap 4 a utils d'affichage qui peuvent être utilisés pour display:table, display:table-cell, display:inline, etc .. Ils peuvent être utilisés avec les utils d'alignement vertical à roues alignées align, inline-block ou des éléments de cellules de tableau.

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

Bootstrap 4 - Centre vertical à l'aide des utilitaires d'affichage Démo

Voir aussi: Vertical Align Center dans Bootstrap 4


Bootstrap 3

Méthode Flexbox sur le conteneur des articles à centrer:

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

Transformez 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 des méthodes de centrage Bootstrap 3


1
Voici la documentation Bootstrap pour mx-auto(centrage horizontal), il est donc logique de centrer my-autoverticalement (axe y).
xinthose

26

Essayez ceci dans le CSS de la div:

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

4
l'élément parent doit être affiché: table
Az.Youness

21

J'ai pensé partager ma "solution" au cas où cela aiderait quelqu'un d'autre qui ne connaît pas les requêtes @media elles-mêmes.

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

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

Des 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és et -sm et plus en rangées, cela fonctionne bien.


Dans mon cas, j'ai dû ajouter un clear: both;aux classes dans les requêtes multimédias pour que cela fonctionne.
motaa

1
@motaa, Désolé pour la confusion ... À la mode BS3, comme vous pouvez le voir dans mon exemple HTML, je l'utilise comme .rowmodificateur ... donc ça devrait ressembler class="row row-sm-flex-center". La .rowdéfinition BS3 gère leclear:both;
Kevin Nelson

J'aurais dû analyser votre code html de manière plus approfondie. :) J'utilise également le modificateur .row mais dans mon cas (wordpress), il a été modifié dans le thème parent, ce qui m'a finalement amené à l'ajouter à clear: both;nouveau.
motaa

21

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 très 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 police de l'élément parent car la ligne définit la taille de police à 0 afin de supprimer les espaces blancs.



17

C'est ma solution. Ajoutez simplement cette classe à votre contenu CSS.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

Ensuite, votre code HTML ressemblerait à ceci:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>


1
Cela casse les classes réactives, telles que col-md-6
Lucas Bustamante

15

Je viens de le faire 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

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

Le problème avec cette approche est qu'elle ne semble pas fonctionner lorsque la DIV a une hauteur spécifiée: jsfiddle.net/4bpxen25/1 Je recommande: stackoverflow.com/a/28519318/1477388
user1477388

10

Je trouve vraiment que le code suivant fonctionne avec Chrome et non avec 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;
}

Lien Bootply

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


8

J'ai rencontré ce même problème. Dans mon cas, je ne connaissais pas la hauteur du conteneur extérieur, mais voici comment je l'ai fixé:

Réglez d'abord la hauteur de vos éléments htmlet bodyafin qu'ils soient à 100%. C'est important! Sans cela, les éléments htmlet bodyhériteront simplement de la taille de leurs enfants.

html, body {
   height: 100%;
}

Ensuite, j'ai eu une classe de conteneur externe avec:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

Et enfin le conteneur intérieur avec classe:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

Le HTML est aussi simple que:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

C'est tout ce dont vous avez besoin pour aligner verticalement le contenu. Découvrez-le au violon:

Jsfiddle


8

Il n'y a aucun besoin de tableau et de cellules de tableau. Cela peut être réalisé facilement en utilisant transform.

Exemple: http://codepen.io/arvind/pen/QNbwyM

Code:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>


7

Si vous utilisez la version Less de Bootstrap et compilez vous-même en CSS, vous pouvez utiliser certaines classes d'utilitaires à utiliser avec les classes Bootstrap.

J'ai trouvé que cela fonctionnait parfaitement bien là où je voulais préserver la réactivité et la configurabilité du système de grille Bootstrap (comme avec -mdou -sm), mais je veux que toutes les colonnes d'une ligne donnée aient toutes la même hauteur verticale (afin que je puisse puis aligner verticalement leur contenu et faire en sorte que toutes les colonnes de la ligne partagent un milieu commun).

CSS / Moins:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

6

J'ai développé un peu la réponse de zessx , afin de la rendre plus facile à utiliser lors du mélange de différentes tailles de colonnes sur différentes tailles d'écran.

Si vous utilisez Sass , vous pouvez l'ajouter à votre fichier scss:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

Ce qui génère le CSS suivant (que vous pouvez utiliser directement dans vos feuilles de style, si vous n'utilisez pas Sass):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

Vous pouvez maintenant l'utiliser sur vos colonnes réactives comme ceci:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

C'est vraiment sympa!
Pietro Coelho

Surévalué uniquement en raison de la courte syntaxe et de l'utilisation de variables LESS.
Eduard Luca

5

Les comportements Flex sont pris en charge nativement depuis Bootstrap 4. Ajoutez d-flex align-items-centerle rowdiv. Vous n'avez plus besoin de modifier votre contenu CSS.

Exemple simple: http://jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

Avec votre exemple: http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

Source: Flex · Bootstrap


4

OK, accidentellement, j'ai mélangé quelques solutions, et cela fonctionne finalement maintenant pour ma mise en page où j'ai essayé de créer un tableau 3x3 avec des colonnes Bootstrap sur la plus petite résolution.

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>


2

    div{
        border: 1px solid;
    }
    span{
        display: flex;
        align-items: center;
    }
    .col-5{
        width: 100px;
        height: 50px;
        float: left;
        background: red;
    }
    .col-7{
        width: 200px;
        height: 24px;

        float: left;
        background: green;
    }
    <span>
        <div class="col-5">
        </div>
        <div class="col-7"></div>
    </span>


1

Essaye ça,

.exe {
  font-size: 0;
}

.exe > [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  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>


1

Vous pouvez le faire de plusieurs manières:

  1. Utilisation 

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

    et le CSS du conteneur à

    display: table;
  2. Utilisez le remplissage avec media-screen pour modifier le remplissage par rapport à la taille de l'écran. Écran Google @media pour en savoir plus.

  3. Utiliser un rembourrage relatif

    C'est-à-dire, spécifiez le rembourrage en termes de%


0

Avec Bootstrap 4 (qui est actuellement en alpha), vous pouvez utiliser la .align-items-centerclasse. Vous pouvez donc conserver le caractère réactif de Bootstrap. Fonctionne tout de suite très bien pour moi. Voir la documentation de Bootstrap 4 .


Cela ne fonctionne que pour certains éléments lorsque l'élément contenant est affiché: flex.
Zim

0

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

-4

Je suis tombé sur la même situation où je voulais aligner quelques éléments div verticalement dans une rangée et j'ai trouvé que les classes Bootstrap col-xx-xx appliquent le style à la div comme float: left.

J'ai dû appliquer le style sur les éléments div comme style = "Float: none" et tous mes éléments div ont commencé alignés verticalement. Voici l'exemple de travail:

<div class="col-lg-4" style="float:none;">

Lien JsFiddle

Juste au cas où quelqu'un voudrait en savoir plus sur la propriété float:

W3Schools - Float


Ça ne marche pas pour moi. J'ai testé dans Firefox et Chrome. Tous les panneaux sont empilés verticalement.
Alf

float: aucun ne les fera empiler verticalement, c'est ainsi que cela devrait fonctionner.
ATHER

1
C'est alors la bonne réponse pour une autre question. ;)
Alf
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.