Décalage suite à un alignement vertical

Version imprimable

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:

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:

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 !

13/03/2013, 15h17
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.
13/03/2013, 16h24
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...
13/03/2013, 16h36
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.
13/03/2013, 16h48
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.

Citation:

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...
15/03/2013, 07h10
FixSan

Citation:

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 ???
15/03/2013, 09h44
Bisûnûrs

Le mieux reste le table-cell. Pour cela, il faut aussi mettre vertical-align:middle sur le li, supprimer le float:left et mettre une largeur au ul correspondant à la somme de la largeur des li.
20/03/2013, 10h51
Candygirl

Citation:

Envoyé par FixSan

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.

Citation:

Envoyé par FixSan

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.
22/03/2013, 17h25
FixSan

Je suis désolé de répondre aussi tardivement.

J'ai un peu de temps ce week-end, alors je voudrais m'y remettre.

Citation:

Envoyé par Candygirl

Mais tu la connais, la hauteur de tes images

Je n'ai pas dit que je ne la connaissais pas : j'ai juste dit qu'elle n'était pas identique pour toutes les images ;)
Néanmoins, je ne comprends pas comment je peux utiliser cela dans le cadre de ma CSS.

Citation:

Envoyé par Candygirl

Tu pourrais, pour chaque image, ajouter un style en ligne en fonction de sa hauteur.

Je ne comprends pas : pour chaque hauteur possible ? Il y en aurait trop... Mais c'est sans doute moi qui comprends mal. Pourrais-tu préciser un peu plus ta pensée ? Merci ;)

Citation:

Envoyé par Candygirl

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.

Un exemple quelque part ? Merci beaucoup !
23/03/2013, 10h04
Candygirl
Tu peux commencer par tester la méthode du display:table-cell décrite par Bisûnûrs. Si tu veux assurer un rendu potable sur IE7-, tu devras ajouter un css spécifique par commentaires conditionnels. Cette méthode a l'avantage de laisser ton html vierge de tout ajout.

Mes deux autres propositions supposaient que tu aies possibilité de modifier le php. Dans le premier cas, l'idée est de faire un css généraliste dans ta page css pour les images qui font 240 (la majorité quand même, à voir). genre:
Code:

1 2 3 4 5 6 7 img { display:block; margin:0 auto; position:relative; top:50%; margin-top:-120px; }
Et, dans ta page php, au moment de l'insertion des images, tu fais un test voir si leur hauteur est inférieur à 240. Si oui, alors tu rajoutes le margin négatif de la moitié de la hauteur dans la balise img, qui prendra le pas sur celui défini ds ton css pour les images de 240:

Code:

<img src="/dotclear-files/public/images/jeunesse/2012/.fraise_s.jpg" alt="Fraise (Jean-Charles Sarrazin)" height="186" width="240" style="margin-top="-93px">

L'avantage est que c'est compatible avec les vieux nav.

Pour l'image de fond, cela implique aussi de définir un style en ligne via php (l'url de l'image de fond). Et tu peux la centrer avec un bête background-position:center.

Soit tu l'attribues directement à ton lien, soit à l'image en jouant avec des padding et un heigth / width de 0 pour conserver un alt. Bref à voir comment tu souhaiterais gérer le problème de l'accessibilité avec cette option.
23/03/2013, 10h29
FixSan
Merci beaucoup pour cette réponse très détaillée.

J'ai testé le display: table-cell selon la méthode indiquée plus haut par Bisûnûrs. L'ennui, c'est ça :

Citation:

Envoyé par Bisûnûrs

supprimer le float:left et mettre une largeur au ul correspondant à la somme de la largeur des li.

Ça met le bazar dans mon carrousel d'images (géré en jS par jCarousel), dont la configuration CSS minimale (comme indiqué sur la page d'installation du script jCarousel) contient le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 .jcarousel ul { width: 20000em; position: absolute; list-style: none; margin: 0; padding: 0; } .jcarousel li { float: left; }
C'est dommage, parce que j'aurais préféré éviter de mélanger le style à mon code HTML.

Je vais donc maintenant chercher à suivre l'une des deux autres méthodes que tu indiques, et reviendrai ici indiquer le résultat. Un grand merci et bon week-end !