Vertical align inline-flex éléments
Je suis triying à vertical-align 3 différents inline-flex éléments dans une même div, mais ce dernier ne rentre pas comme prévu.
HTML
<div class="container">
<div class="left">
<span>2014/01/21</span>
</div><div class="middle">
<button>Hello</button>
<button>Bye</button>
</div><div class="right">
<ul>
<li>Chocolate</li>
<li>Caramel</li>
<li>Watermelon</li>
</ul>
</div>
</div>
CSS
.container {
height: 100px;
width: 100%;
background-color: blue;
}
.container .left, .container .right {
height: 100%;
width: 30%;
}
.container .middle {
height: 100%;
width: 40%;
}
.container .left, .container .middle {
display: -webkit-inline-flex;
-webkit-justify-content: center;
-webkit-align-items: center;
display: -moz-inline-flex;
-moz-justify-content: center;
-moz-align-items: center;
}
.container .right {
display: -webkit-inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-webkit-box-pack: center;
-webkit-flex-pack: center;
-webkit-justify-content: center;
-webkit-flex-align: center;
-webkit-align-items: center;
display: -moz-inline-flex;
-moz-justify-content: center;
-moz-align-items: center;
-moz-flex-direction: column;
}
.container .right ul {
padding: 0;
margin: 0;
}
Ajouter
Nice ! Pouvez-vous ajouter ce commentaire comme une réponse afin que je puisse valide ?
Ajout de la réponse 🙂
vertical-align: top
à .container .right
- JSFiddleNice ! Pouvez-vous ajouter ce commentaire comme une réponse afin que je puisse valide ?
Ajout de la réponse 🙂
OriginalL'auteur Ludo | 2014-01-22
Vous devez vous connecter pour publier un commentaire.
Juste ajouter vertical-align:top à
.container .right
:JSFiddle
OriginalL'auteur Vucko
Si vous utilisez autoprefixer vous n'aurez pas besoin d'-webkit - préfixes pour toutes les règles. Ce guide est super utile pour savoir comment faire pour centrer avec Flexbox: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
OriginalL'auteur matt_jared