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.
En suivant le tutoriel "Comment centrer verticalement sur tous les navigateurs ?", j'ai modifié le code de ma page comme suit :
Le problème est le suivant (testé sous Firefox 19.0.2) : 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 !
Modifié par Fix (12 Mar 2013 - 14:17)
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.
En suivant le tutoriel "Comment centrer verticalement sur tous les navigateurs ?", j'ai modifié le code de ma page comme suit :
<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>
#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) : 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 !
Modifié par Fix (12 Mar 2013 - 14:17)