aligner verticalement avec Bootstrap 3
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 dans Bootstrap utilise float: left, pas display:inline-block, de sorte que la propriété vertical-align ne fonctionne pas. J'ai essayé d'utiliser margin-top pour y remédier, mais je pense que ce n'est pas une bonne solution pour le design responsive.
Cette réponse est un hack, mais je vous recommande vivement d'utiliser flexbox (comme indiqué dans @ Haschem answer ), car il est maintenant pris en charge partout.
Lien démos:
- Bootstrap
- Bootstrap 4 alpha 6
Vous pouvez toujours utiliser une classe personnalisée quand 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>Utiliser 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 totalise 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 à la ligne et 2 tabs/8 espaces). Et donc...
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>
Remarquez les apparemment commentaires inutiles <!-- ... -->? Ils sont importants - sans eux, les espaces entre les éléments <div> prendront de la place dans la présentation, brisant ainsi le système de grille.
Remarque: le Bootply a été mis à jour
Disposition de boîte flexible
Avec l'avènement du CSS Flexible Box , de nombreux cauchemars de concepteurs de sites Web1 ont été résolus. L'un des plus difficiles, l'alignement vertical. Maintenant, il est possible même dans des hauteurs inconnues .
"Deux décennies de piratages de mise en page se terminent. Peut-être pas demain, mais bientôt, et pour le reste de nos vies."
- CSS Legendary Eric Meyer à W3Conf 201
Flexible Box (ou Flexbox) est un nouveau système de mise en page spécialement conçu à des fins de mise en page. Le états de spécification :
La disposition Flex est superficiellement similaire à la disposition en blocs. Il manque beaucoup des propriétés plus complexes centrées sur le texte ou le document qui peuvent être utilisées dans la disposition en blocs, telles que les flottants et les colonnes. En retour, il bénéficie d'outils simples et puissants pour la distribution d'espace et l'alignement du 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 _.row_ s ayant quelques _.col-*_ s. Il suffit d’afficher le _.row_ souhaité2 en tant que conteneur flexible et alignez ensuite tous ses élément flexible s (les colonnes) verticalement par align-items .
EXEMPLE ICI (Veuillez 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
La zone colorée affiche la zone de remplissage des colonnes.
Clarification sur _align-items: center_
8.3 Alignement transversal: propriété _
align-items_Les éléments Flex peuvent être alignés dans le axe transversal de la ligne actuelle du conteneur Flex, similaire à
justify-contentmais à la perpendiculaire. direction.align-itemsdéfinit l’alignement par défaut de tous les éléments du conteneur flex, y compris les éléments anonymes éléments flex ._
align-items: center;_ Par valeur centrale, la zone de marge de élément flexible est centrée dans le axe transversal de la ligne.
Grande alerte
Remarque importante n ° 1: Twitter Bootstrap ne spécifie pas la width des colonnes dans les très petits périphériques, à moins que vous ne donniez une des classes _.col-xs-#_ aux colonnes.
C'est pourquoi, dans cette démonstration particulière, j'ai utilisé les classes _.col-xs-*_ afin que les colonnes s'affichent correctement en mode mobile, car elles spécifient explicitement la width de la colonne.
Mais vous pouvez également désactiver la disposition Flexbox en modifiant simplement _display: flex;_ en _display: block;_ dans un écran spécifique. tailles. 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écifiez _.vertical-align_ uniquement sur des tailles d'écran spécifiques comme suit:
_/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
_Dans ce cas, j'irais avec @ KevinNelsonapproche .
Remarque importante n ° 2: Préfixes de fournisseur 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 aussi 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 vendeur telles que _display: -webkit-box_ et ainsi de suite en mode de 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 flex) ne sont plus aussi hautes que leur conteneur (la boîte de conteneur flex. C'est-à-dire l'élément _.row_).
Cela est dû à l'utilisation de la valeur center de la propriété _align-items_. La valeur par défaut est stretch afin 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
La zone colorée affiche la zone de remplissage des colonnes.
Dernier point, mais non le moindre , notez que les démos et les extraits de code présentés ici ont pour but de vous donner une idée différente, de fournir une approche moderne pour atteindre l'objectif . Veuillez vous rappeler de la section " Big Alert " si vous allez utiliser cette approche dans des sites Web ou des applications du monde réel.
Pour en savoir plus, y compris la prise en charge du navigateur, ces ressources seraient utiles:
- Réseau de développeurs Mozilla - Boîtes souples
- Guide pour Flexbox - Astuces CSS
- HTML5Rocks - Flexbox rapide
- SmashingMagazine - Centrer des éléments avec Flexbox
- Philip Walton - Résolu par Flexbox
- Puis-je utiliser: Module de disposition de boîte flexible
1. aligner verticalement une image dans une div avec une hauteur de réponse2. Il est préférable d'utiliser une classe supplémentaire afin de ne pas modifier le comportement par défaut de Twitter Bootstrap _.row_.
Le code ci-dessous a fonctionné pour moi:
.vertical-align {
display: flex;
align-items: center;
}
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 au hauteur du parent
Si le parent de l'élément que vous essayez de centrer n'a pas de hauteur définie , aucune du centrage vertical les solutions fonctionneront!
Bootstrap 4
Maintenant que Bootstrap 4 est flexbox par défaut , il existe de nombreuses approches différentes de l'alignement vertical à l'aide de: marges automatiques , tilitaires flexbox , ou tilitaires d'affichage avec tilitaires d'alignement vertical . Au début, "utils d'alignement vertical" semble évident, mais ceux-ci seulement fonctionnent avec des éléments d'affichage en ligne et sous forme de tableau. Voici quelques Bootstrap 4 options de centrage vertical.
1 - Centre vertical à l'aide des marges automatiques:
Une autre façon de centrer verticalement consiste à utiliser my-auto. Cela va centrer l'élément dans son conteneur. Par exemple, h-100 donne à la ligne toute la hauteur et my-auto centrera verticalement la colonne col-sm-12.
<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 des marges automatiques Démo
my-auto représente les marges sur l'axe des y vertical et équivaut à:
margin-top: auto;
margin-bottom: auto;
2 - Centre vertical avec Flexbox:
Puisque Bootstrap 4 .row est maintenant display:flex, vous pouvez simplement utiliser align-self-center sur n'importe quelle colonne pour la 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-center sur tout le .row pour centrer verticalement tous les col-* de la ligne ...
<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 - Colonnes différentes hauteur centre vertical Démo
3 - Centre vertical à l'aide des utilitaires d'affichage:
Bootstrap 4 a tilitaires d’affichage pouvant être utilisé pour display:table, display:table-cell, display:inline, etc. Ces options peuvent être utilisées avec le alignement vertical utils pour aligner des éléments de cellule inline, inline-block ou 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 utilisant des utils d'affichage Démo
Voir aussi: Centre d'alignement vertical dans Bootstrap 4
Bootstrap 3
Méthode Flexbox sur le conteneur du ou des articles à centrer:
.display-flex-center {
display: flex;
align-items: center;
}
Transforme la méthode de traduction:
.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;
}
Essayez ceci dans le CSS de la div:
display: table-cell;
vertical-align: middle;
Suite à la réponse acceptée, si vous ne souhaitez pas personnaliser le balisage, séparer les problèmes ou tout simplement parce que vous utilisez un CMS, la solution suivante fonctionne correctement:
.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 limite 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 la police sur 0 afin de supprimer les espaces.
Je pensais partager ma "solution" au cas où cela aiderait des personnes qui ne sont pas familières avec les requêtes @media elles-mêmes.
Grâce à la réponse de @ HashemQolami, j'ai construit des requêtes multimédia qui fonctionneraient comme les classes de classes pour pouvoir empiler les colonnes pour *, mais les afficher verticalement au centre pour les é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;
}
}
Les mises en page plus compliquées nécessitant 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 une mise au point plus avancée, mais pour une page simple avec -xs et empilé et -sm et plus grand en rangées, cela fonctionne très bien.
Je préfère cette méthode selon David Walsh Vertical Center CSS :
.children{
position: relative;
top: 50%;
transform: translateY(-50%);
}
La transform n'est pas essentielle; il trouve juste le centre un peu plus précis. En conséquence, Internet Explorer 8 sera peut-être légèrement moins centré, mais ce n’est pas encore mauvais - puis-je utiliser - Transforme 2d .
Ceci 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>Je viens de faire cela 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
+--------------------------------+
| |
| +--------------------------+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| +--------------------------+ |
| |
+--------------------------------+
Je trouve vraiment que le code suivant fonctionne avec Chrome et pas 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 d'ampleur
Vous devrez peut-être modifier les hauteurs (en particulier sur .v-center) et supprimer/modifier div sur div[class*='col-'] pour répondre à vos besoins.
J'ai rencontré le même problème. Dans mon cas, je ne connaissais pas la hauteur du conteneur extérieur, mais voici comment je l'ai fixé:
Commencez par définir la hauteur de vos éléments html et body de manière à ce qu'ils soient à 100%. C'est important! Sans cela, les éléments html et body hé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;
}
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. Allez voir ça au violon:
Jsfiddle
Il n'y a aucun besoin de table et de table-cellules. 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>Si vous utilisez la version Less de Bootstrap et si vous le compilez vous-même dans CSS, vous pouvez utiliser certaines classes d’utilitaires à utiliser avec les classes Bootstrap.
J'ai trouvé que cela fonctionnait à merveille lorsque je souhaitais préserver la réactivité et la configurabilité du système de grille Bootstrap (comme avec -md ou -sm), mais je veux toutes les colonnes. dans une rangée donnée, tous ont la même hauteur verticale (pour pouvoir ensuite aligner verticalement leur contenu et faire en sorte que toutes les colonnes de la rangée 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>
J'ai expliqué un peu la réponse de zessx , afin de faciliter son utilisation lors du mélange de différentes tailles de colonnes sur différentes tailles d'écran.
Si vous utilisez Sass , vous pouvez ajouter ceci à 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 les CSS suivants (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;
}
}
Maintenant, vous pouvez l’utiliser sur vos colonnes responsive 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>
OK, j'ai accidentellement mélangé plusieurs solutions, et cela fonctionne enfin pour ma mise en page où j'ai essayé de créer une table 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>Les comportements Flex sont pris en charge de manière native depuis Bootstrap 4. Ajoutez d-flex align-items-center dans le row div. 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
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>Vous pouvez le faire de plusieurs manières:
Utilisation
display: table-cell; vertical-align: middle;et le CSS du conteneur à
display: table;Utilisez le remplissage avec media-screen pour changer le remplissage par rapport à la taille de l'écran. Google @ media screen pour en savoir plus.
Utilisez un rembourrage relatif
C.-à-d., Spécifier le remplissage en termes de%
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>Avec Bootstrap 4 (qui est actuellement en alpha), vous pouvez utiliser la classe .align-items-center. Vous pouvez donc conserver le caractère réactif de Bootstrap. Travaille tout de suite bien pour moi. Voir Documentation Bootstrap 4 .
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;
}