28172 sujets

CSS et mise en forme, CSS3

Décalage vertical-align:middle [résolu]

Bonjour bonjour !

Je veux "simplement" placer des images dans un conteneur de hauteur fixe. Si une image est moins haute elle sera centrée verticalement, et dans le cas contraire elle prendra la hauteur du conteneur.

J'ai donc utilisé :

<div id="partenaires">
	<img src="images/partenaires/Debian.png" alt="Debian" />
	<img src="images/partenaires/Fedora.png" alt="Fedora" />
	...
</div>


avec

#partenaires {
	height:3em;
	line-height:3em;
	white-space:nowrap;
	overflow:hidden;
	clear:both;
}
#partenaires img {
	vertical-align:middle;
	margin:0 1em;
	max-height:100%;
}


Et là damned, les images trop hautes sont bien redimensionnées mais tronquées en bas :

upload/26803-Capture.PNG

Apparemment cela viendrait du fait que les images ne seraient pas centrées verticalement puisque si j'enlève le vertical-align elles apparaissent correctement...

Donc ai-je raté quelque chose ? Ou vertical-align:middle; n'est-il pas fiable (même comportement tous navigateurs confondus) ?

Dans tous les cas comment puis-je résoudre ce problème ?

Merci d'avance Smiley cligne
Modifié par MatTheCat (24 Nov 2010 - 14:21)
Bonjour,

merci mais mon problème est plus spécifique puisque le centrage est effectif, en fait j'ai eu la réponse sur stackoverflow. Apparemment un espacement est ajouté au dessus et en dessous de la "ligne d'affichage", donc spécifier un line-height égal à la hauteur du bloc la fait dépasser de ce dernier vers le bas, ce qui expliquait que mes images étaient tronquées.
Ce phénomène doit être observable seulement pour des éléments faisant la même hauteur que leur parent en overflow:auto ou hidden, on peut dire que j'ai eu de la chance..!

La réponse était donc "préciser un line-height inférieur à la hauteur du parent", ici 2.7em par exemple.
Modifié par MatTheCat (24 Nov 2010 - 14:22)
'Sup,

MatTheCat a écrit :
Donc ai-je raté quelque chose ? Ou vertical-align:middle; n'est-il pas fiable (même comportement tous navigateurs confondus) ?
Le combo vertical-align / line-height fonctionne sur les éléments de rendu "en-ligne", et qui dit "en-ligne" dit résultat variable en fonction de la police utilisée et de sa taille. C'est pour cela que si tu mets une bordure sur #partenaires, tu constateras que les images sont décalées de quelques pixels par rapport à un centrage vertical parfait.

Quelques idées pour régler le problème :

- Réduire le line-height de #partenaires pour minimiser le décalage.

- Supprimer le overflow:hidden (je ne pense pas qu'il ait un réel intérêt ici), ça empêchera au conteneur de couper ton image.

- Utiliser le positionnement relatif et jouer avec la valeur top (ou bottom) pour trouver le centrage parfait des images dans ton contexte :
#partenaires img { 
...
position:relative;
top:-2px; }

- S'affranchir du line-height sur #partenaires, mais ça risque de ne plus fonctionner sur IE7 (à vérifier).

EDIT : Arf... too late. Smiley decu
Modifié par BeliG (24 Nov 2010 - 14:29)
Mouarf merci BeliG ^^

Pour le coup du bloc avec height/line-height ça vient du tuto alsacreations pour centrer verticalement !

Et pour répondre à ta question le overflow:hidden a un intérêt car je compte implémenter un slider, voilà !
Juste pour info, si on vire le line-height on obtient un centrage vertical parfait, et même sur IE7 (je viens de vérifier).
Ah oui tiens j'aurais pas dû me compliquer la vie... Merci beaucoup ça me fera des octets en moins et moins de prise de tête Smiley smile
Argh j'ai craqué, ça me semblait bizarre aussi que le line-height soit inutile (après tous les tests que j'avais fait pour le tuto) ! Smiley biggrin

En fait, si tu enlèves le line-height les images s'alignent bien verticalement, mais seulement par rapport à l'image la plus haute du lot. Cette image quant à elle, ne s'alignera pas par rapport au conteneur.

Donc si ton image la plus haute fait la hauteur de ton conteneur, ça va, mais sinon, non. Smiley cligne
Houlàà c'est bien compliqué tout ça ^^

Au final comme mon conteneur n'a pas de fond "visible" je pourrai toujours donner l'illusion de centrage.

Bon j'espère qu'on a fait le tour là Smiley biggrin

Merci beaucoup pour tes infos Smiley cligne
MatTheCat a écrit :
Au final comme mon conteneur n'a pas de fond visible je pourrai toujours donner l'illusion de centrage.
... ou alors tu supprimes aussi la hauteur de ton conteneur. Smiley biggrin

Tu gagneras encore quelques octets. Smiley cligne
Eh eh en effet, mon css devient donc

#partenaires {
    white-space:nowrap; 
    overflow:hidden; 
    clear:both; 
} 
#partenaires img { 
    vertical-align:middle; 
    margin:0 1em; 
    max-height:3em; 
}
Sujet clos
Aller à