Bootstrap 3 et vertical align

Bonjour,

J'utilise bootstrap v3, je souhaite afficher une galerie d'image.
4 images par ligne, pour simplifier l'exemple ici cela donne avec le système de grille bootstrap : col-md-3 , j'utilise aussi leur classe thumbnail et img-responsive.
Le problème est :
1) je ne connais pas la hauteur de l'image a l'avance
2) le texte peut etre de différente longueur

Pour résumer : je ne connais pas et je ne peux pas définir une hauteur pour la div. Et l'ensemble dois rester responsive.

Le problème est que bootstrap utilise un float:left pour son système de grille, et comme vous le savez certainement float:left est vraiment mauvais pour faire un alignement vertical.

D'habitude pour corriger ce problème de float j'utilise :

display:inline-block

sauf que dans le cas de la grille de bootstrap cela ne fonctionne pas ( je ne sais pas pourquoi ).

J'ai donc chercher sur stackoverflow et je suis tombé sur des gens qui conseil d'utilise flex :

.vcenter {
display: flex;
align-items: center;
}
et ensuite :
<div class="col-md-3 vcenter ">

mais malheureusement cela ne change rien.

J'ai passé l'après midi la dessus et la j'avoue être a cours d'idée.

Je vous propose le codepen suivant avec le code html complet, que j'ai simplifié au maximum pour des raisons de lisibilité. Vous verrez immédiatement de quel problème d'alignement je parle. En effet a la 5 ème image je voudrais qu'elle se mets complétement a gauche et ainsi de suite.

https://codepen.io/stellvia/pen/aeJXzQ

Merci d'avance pour la personne qui saurait m'éclairer.
Modifié par stellvia (30 Jul 2019 - 15:04)

stellvia a écrit :
Pour résumer : je ne connais pas et je ne peux pas définir une hauteur pour la div. Et l'ensemble dois rester responsive.

Un grand classique... qui demeure une difficulté en CSS quel que soit la méthode de positionnement choisie.
L'explication est simple : quand une rangée est dessinée à l'écran avec les positionnements classiques (float, inline-block, flexbox, etc.), les éléments qui passent à la rangée suivante ne peuvent plus "remonter" en partie dans la rangée précédente.

A ma connaissance, voici les moyens d'y parvenir :
1- Masonry (framework JavaScript)
2- Flexbox version pur CSS, mais avec adaptation nécessaire : https://codepen.io/raphaelgoetter/pen/mJRqKd
3- Flexbox version CSS + JS : https://codepen.io/chriscoyier/pen/pqEgBV
4- Grid Layout version pur CSS : https://codepen.io/raphaelgoetter/pen/pgRQwv (c'est ce qui se rapproche le moins de la bidouille selon moi)
Modifié par Raphael (30 Jul 2019 - 15:48)