vertical-align avec Bootstrap 3

Question

J'utilise Twitter Bootstrap 3, et j'ai des problèmes lorsque je veux aligner verticalement deux div par exemple - Lien vers 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 pas display:inline-block donc la propriété vertical-align ne fonctionne pas. J'ai essayé d'utiliser margin-top pour le corriger, mais je pense que ce n'est pas une bonne solution pour le responsive design.

Answer 1

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

Lien vers les 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

Utilisation de 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 casse notre grille si la taille des colonnes atteint 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...

Donnons un coup de pied dans 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>

Remarquez le apparemment commentaires inutiles <!-- ... --> ? Ils sont important -- Sans eux, l'espace entre les mots de l'alphabet et les lettres de l'alphabet. <div> prendront de l'espace dans la mise en page, brisant ainsi le système de grille.

Note : le Bootply a été mis à jour

Answer 2

Mise en page flexible des boîtes

Avec l'avènement de la Boîte flexible CSS la plupart des cauchemars des concepteurs de sites web 1 ont été résolus. L'un des problèmes les plus épineux est l'alignement vertical. Maintenant, il est possible même en hauteurs inconnues .

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

- CSS légendaire Eric Meyer à l'adresse W3Conf 2013

Flexible Box (ou en abrégé, Flexbox), est un nouveau système de mise en page spécifiquement conçu pour la mise en page. Le site états des spécifications :

La disposition Flex est superficiellement similaire à la disposition en blocs. Il lui manque de nombreuses propriétés plus complexes centrées sur le texte ou le document qui peuvent être utilisées dans la mise en page par blocs, telles que les flottants et les colonnes. En contrepartie, il bénéficie d'outils simples des outils simples et puissants pour distribuer l'espace et aligner le contenu de manière dont les applications Web et les pages Web complexes ont souvent besoin.

Comment cela peut-il aider dans ce cas ? Eh bien, voyons voir.

---

Colonnes alignées verticalement

En utilisant Twitter Bootstrap, nous avons .row a un peu de .col-* s. Tout ce que nous devons faire est d'afficher les .row 2 en tant que conteneur souple et ensuite aligner tous ses élément flexible (les colonnes) verticalement par align-items propriété.

EXEMPLE ICI (Veuillez lire les commentaires avec attention)

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

La sortie

La zone colorée affiche le padding-box des colonnes.

Clarification sur align-items: center

8.3 Alignement sur l'axe transversal : le align-items propriété

Articles flexibles peuvent être alignés dans le axe transversal de la ligne courante du conteneur flex, similaire à justify-content mais dans la direction perpendiculaire. align-items définit l'alignement par défaut de tous les éléments du conteneur flexible, y compris les éléments anonymes. articles flexibles .

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

---

Alerte générale

Note importante n°1 : Twitter Bootstrap ne spécifie pas le width de colonnes dans des appareils très petits, à moins que vous ne donniez à l'une des .col-xs-# aux colonnes.

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

Mais vous pouvez aussi éteindre la mise en page Flexbox en changeant simplement 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 uniquement sur des tailles d'écran spécifiques comme ça :

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

Dans ce cas, je choisirais @KevinNelson 's approche .

Note importante n°2 : Les préfixes des fournisseurs ont été omis pour des raisons de 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 anciennes qu'Internet Explorer 9 ! Flexbox est supporté sur Internet Explorer 10 et plus).

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

Si vous cliquez sur "Toggle Compiled View" dans le Démo vous verrez la version préfixée des déclarations CSS (grâce à Préfixe automatique ).

---

Colonnes pleine hauteur avec contenu aligné verticalement

Comme vous le voyez dans le Démonstration précédente les colonnes (les éléments flexibles) ne sont plus aussi hautes que leur conteneur (la boîte du conteneur flexible). .row élément).

Cela est dû à l'utilisation de center valeur pour align-items propriété. La valeur par défaut est stretch afin que les éléments puissent remplir toute la hauteur de l'élément parent.

Afin de corriger cela, vous pouvez ajouter display: flex; aux colonnes également :

EXEMPLE ICI (Encore une fois, 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  */
}

La sortie

La zone colorée affiche le padding-box des colonnes.

Dernier point, mais non le moindre Notez que les démonstrations et les extraits de code présentés ici sont destinés à vous donner une idée différente, à fournir une approche moderne pour atteindre l'objectif. Veuillez tenir compte de la mention " Alerte générale Si vous comptez utiliser cette approche dans des sites Web ou des applications réelles, vous devez vous référer à la section "Autres".

---

Pour une lecture plus approfondie, y compris le support du navigateur, ces ressources seraient utiles :

• Mozilla Developer Network - Boîtes flexibles
• Guide To Flexbox - CSS Tricks
• HTML5Rocks - Flexbox rapide
• SmashingMagazine - Centrer les éléments avec Flexbox
• Philip Walton - Résolu par Flexbox
• Puis-je utiliser : Module de mise en page flexible des boîtes

---

1. Aligner 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 classe par défaut de Twitter Bootstrap. .row .

Answer 3

Essayez ceci dans le CSS de la division :

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

Answer 4

Je constate sincèrement que 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;
}

Lien Bootply

Vous devrez peut-être modifier les hauteurs (spécifiquement sur .v-center ) et enlever/modifier la div sur div[class*='col-'] pour vos besoins.

Answer 5

J'ai rencontré la même situation où je voulais aligner quelques éléments div verticalement dans une rangée et j'ai découvert que les classes col-xx-xx de Bootstrap appliquent un style au 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 été alignés verticalement. Voici l'exemple de travail :

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

Lien vers JsFiddle

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

W3Schools - Flottement