Étiquette : vertical-align

[CSS] [jQuery] Une liste responsive d’éléments avec visuels de dimensions différentes alignés horizontalement et verticalement dans les cadres dans lesquels ils s’inscrivent

Une version qui gère l’alignement vertical des images responsives (fluides) en pure CSS

Sources : Bootstrap vertical align responsive images example code, (mon jsFiddle) [Pure CSS attempt] Responsive product list (w/responsive images).

Une version un peu moins légère qui gère l’alignement vertical des images responsives (fluides) avec jQuery

Un code source à peu près fonctionnel est disponible ici, mais ne se lancera pas au 1er chargement de la page. Il faudra relancer le code en cliquant sur Run.
Cependant, le bout de script suivant a été mis en place avec succès dans un projet Change (v3.6.8) :

L’ajout de $(window).on('load', function(){ ... }); permet aux visuels de s’afficher dans la page avant de lancer le script (car il a besoin de connaître leurs dimensions pour effectuer ses calculs d’alignement).

[CSS][Bootstrap 3] Utiliser la propriété vertical-align avec la grille

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

Source : Bootstrap: Vertical align into a Grid v2 – CodePen

Le mixin LESS

[CSS] Aligner un texte verticalement avec display:table, display:table-cell et vertical-align:middle

Centrer un texte en hauteur avec CSS, dans un menu horizontal de navigation par exemple…

centrer_texte_en_hauteur

Simulation : http://jsfiddle.net/frontenddeveloper/Qrz58/16/

Une variante : le menu se comporte réellement comme un tableau HTML

variante

Simulation : http://jsfiddle.net/frontenddeveloper/5nkFV/2/