943 votes

vertical-align avec Bootstrap 3

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.

1 votes

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

3 votes

7 votes

IMPORTANT : Les deux colonnes doivent avoir la classe "vcenter". Sinon, cela ne fonctionnera pas. J'ai passé une heure et demie à résoudre ce problème.

957voto

zessx Points 17769

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

Enter image description here

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>

Enter image description here

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

1 votes

@f4der float: none manquait dans mon Bootply, ça pourrait être la cause.

1 votes

Je l'ai réparé pour vous :-) (en attente de modération) (et puis j'ai appris comment fonctionne le "save" de Bootply, et vraiment "l'a réparé pour vous.")

19 votes

Ce problème se pose si vous spécifiez des grilles de colonnes dont la somme est égale à 12 (par exemple en utilisant col-lg-2 et col-lg-10 ). Il est intéressant de noter que si vous ajoutez le code JS suivant (en supposant qu'il s'agisse de jQuery), le problème s'arrange tout seul : $('.row').html($('.vcenter'));

912voto

Hashem Qolami Points 22990

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

Vertical aligned columns in Twitter Bootstrap

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

Full-height columns with vertical aligned contents in Twitter Bootstrap

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 :


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 .

2 votes

J'adore utiliser Flex et je l'ai utilisé avec une application packagée Chrome, ce qui signifie que je n'ai pas à me préoccuper du css inter-navigateurs. Cependant, sur d'autres projets, je ne peux pas encore l'utiliser car il n'est pas pris en charge par les anciens navigateurs. J'ai pensé que ce serait une information utile.

9 votes

Après une petite recherche, j'ai trouvé que HTML5Please.com dit qu'il y a assez de soutien pour l'utiliser. C'est donc plutôt génial ! html5please.com/#flexbox

1 votes

C'est magnifique ! Merci de répondre avec la solution de facto pour les années à venir.

28voto

user2249160 Points 260

Essayez ceci dans le CSS de la division :

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

4 votes

L'élément parent doit être display:table

11voto

babycakes Points 79

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.

-4voto

ATHER Points 104

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

0 votes

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

0 votes

Float:none les fera s'empiler verticalement, c'est ainsi que cela devrait fonctionner.

1 votes

Alors c'est la bonne réponse à une autre question ;)

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X