Discussion :

[FixSan]

Bonjour,

Sur la page d'accueil du site de la médiathèque de mon village, sous la catégorie "C'est vous qui le dites !", se trouvent des images (couvertures de livres) que je souhaiterais aligner verticalement.

J'ai donc modifié le code de ma page comme suit :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="carousel-comments">
	<ul>
		<li>
			<a href="url_livre_1"><img src="url_miniature_1" alt="livre_1" height="186" width="240"></a>
		</li>
<li>
			<a href="url_livre_2"><img src="url_miniature_2" alt="livre_2" height="240" width="225"></a>
		</li>
		etc, etc, etc.
	</ul>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#carousel-comments { width: 760px; }
	#carousel-comments li { text-align: center; background-color: #FFF; width: 240px; height: 240px; line-height: 240px; margin-right: 20px; }
	#carousel-comments img { background-color: #FFF; padding: 0; margin: 0; border: 0; vertical-align: middle; }

Le problème est le suivant (testé sous Firefox 19.0.2, Chrome 24 et IE 9) : l'ajout du vertical-align: middle; sur l'image entraîne un décalage de l'image vers le bas de quelques pixels (on peut par exemple comparer avec cette page où le vertical-align n'a pas été appliqué).
Je ne m'explique pas ce décalage, et je ne parviens pas à le supprimer. Tout se passe comme si le bloc conteneur était plus grand de quelques pixels... J'ai pourtant bien un conteneur (<li>) d'une hauteur de 240 pixels, pour une image d'une hauteur maxi de 240 pixels aussi...

Quelqu'un pourrait-il m'aider ? D'avance, merci !

[Bisûnûrs]

Pour supprimer l'espacement sous une image, on conseille en général de mettre un vertical-align:bottom ou un display:block sur cette image. Cet espacement est expliqué dans la FAQ :
http://css.developpez.com/faq/?page=autre#IMAGE_espacement

Le tien se trouve au-dessus de ton image à cause de ton line-height de 240px. Donc le navigateur calcule l'interlignage de 240px + cet espacement. Tu peux bidouiller et réduire le line-height de 4px.

[FixSan]

L'ajout d'un vertical-align:bottom ou d'un display:block sur mes images va à l'encontre de ce que je souhaite, puisqu'il empêche le centrage vertical (du moins avec la méthode que j'ai choisie).

Ce que tu dis ensuite ne me semble absolument pas logique : ça signifie que, tant que j'utiliserai vertical-align: middle, il n'y aura pas moyen de centrer verticalement une image dans son conteneur sans qu'elle soit décalée de quelques pixels ? Je n'avais encore lu cela nulle part... Et pourquoi 4 pixels ? S'agit-il de 4 pixels sous tous les navigateurs ? Qui l'a décidé ???

Que ce soit clair : je ne critique absolument pas ta réponse (je t'en remercie au contraire), mais je cherche seulement à comprendre...

[Bisûnûrs]

Les 4px en question sont en fonction de la taille de la font du paragraphe dans lequel sont les images.

De plus, tu détournes déjà toi-même l'utilisation du vertical-align qui sert à aligner verticalement deux éléments inline l'un par rapport à l'autre, et non aligner verticalement un élément inline dans un élément block. Pour que le vertical-align se comporte comme tel, il faut que ton élément conteneur soit de type table-cell, donc qu'il ait un comportement similaire à celui d'une cellule de tableau.

[FixSan]

Je n'avais pas conscience de détourner quoi que ce soit. Je n'ai fait que suivre un tutoriel trouvé sur le net.

Je ne demande pas mieux qu'une autre méthode pour centrer correctement mes images... mais tout ce que j'ai pu trouver sur le net supposait de connaître la hauteur de l'image, ce qui n'est pas possible puisqu'elles ont des hauteurs différentes.

Pour que le vertical-align se comporte comme tel, il faut que ton élément conteneur soit de type table-cell, donc qu'il ait un comportement similaire à celui d'une cellule de tableau.

Ajouter li { display: table-cell; } changerait donc quelque chose ? J'ai essayé, mais rien n'y fait...

[FixSan]

Les 4px en question sont en fonction de la taille de la font du paragraphe dans lequel sont les images.

J'aimerais quand même résoudre mon problème : peut-on donc supposer que ces 4 px seront constants d'un navigateur à l'autre, et d'une résolution à l'autre, quel que soit l'agrandissement du texte choisi par l'utilisateur ?

Autrement dit : puis-je remplacer, comme tu le suggérais, mon "line-height: 240px;" par "line-height: 236px;", et on n'en parle plus ???

[Candygirl]

mais tout ce que j'ai pu trouver sur le net supposait de connaître la hauteur de l'image, ce qui n'est pas possible puisqu'elles ont des hauteurs différentes.

Mais tu la connais, la hauteur de tes images : <img class="" width="225" height="240" ... > Tu pourrais, pour chaque image, ajouter un style en ligne en fonction de sa hauteur.

J'aimerais quand même résoudre mon problème : peut-on donc supposer que ces 4 px seront constants d'un navigateur à l'autre, et d'une résolution à l'autre, quel que soit l'agrandissement du texte choisi par l'utilisateur ?

Autrement dit : puis-je remplacer, comme tu le suggérais, mon "line-height: 240px;" par "line-height: 236px;", et on n'en parle plus ???

Non, choisis "zoom text seul" dans le menu affichage > zoom de Firefox, puis ctrl+ et - et tu visualiseras la réponse.

Un moyen simple pour centrer une image dans un conteneur, sans passer par un display table-celle est de passer par une image de fond.