28220 sujets

CSS et mise en forme, CSS3

Recherche centrage vertical qui marche avec IE6 et FireFox

Je cherche à centrer verticalement un lien <a> contenant une image <img> de hauteur inconnue.

La solution que j'ai trouvée fonctionne bien sous FF mais pas sous IE6. Comment la faire fonctionner ? ou bien trouver une autre solution plus portable ?

Voici le code à tester :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<style>
* { margin: 0; padding: 0; }
body {font-family: "Trebuchet ms", helvetica, arial, sans-serif; font-size: x-small; }
div#photo_display {height: 440px; line-height: 440px; text-align: center; background-color: #ccc }
div#photo_display a {line-height: 440px;}
div#photo_display img {vertical-align: middle; border: none}
</style>
</head>

<body>
<div id="photo_display">
<a href="#">test <img src="http://forum.alsacreations.com/avatars/1-rafcv.jpg" alt="Test" ></a>
</div>
</body>
</html>


Merci à ceux qui prendront la peine de le tester.
Administrateur
Salut,

Pour la Xè fois (désolé que ça tombe sur toi) : vertical-align ne s'utilise pas dans ce cas là, il n'est pas fait pour ça.

Merci à tous de bien vouloir prendre 5 minutes pour faire une recherche dans le forum (environ 10 sujets sur ce thème), ou la FAQ (questions souvent posées) :
http://forum.alsacreations.com/faq/#item3

PS : Bonne chance.
Modifié par Raphael (27 Apr 2005 - 09:50)
J'ai lu la FAQ en question, et plein d'autres trucs, mais sans trouver de solution.

C'est pourquoi j'ai donné un code à tester, qui soit-dit en passant, ne doit pas être si faux, puisqu'il marche dans Firefox.

Justification de mon code:

J'ai un bloc de 440px de haut, dans lequel j'ai défini une hauteur de ligne de la même taille (line-height: 440px). Mon élément <a> devrait donc être centré verticalement (au milieu de sa ligne).

Et c'est bien le cas ! Autant dans IE que dans FF (test facile, enlever le <img ...> dans mon code).

Tout se gâte quand je met l'image. Pourtant l'image est bien de type inline et devrait donc légitimement s'aligner "middle" sur cette ligne.

La FAQ, à laquelle on me renvoie régulièrement, propose la technique des marges négatives. Cette technique est inapplicable dans ce cas, car je ne connais pas la hauteur de l'image.

Si quelqu'un pouvait trouver ce qui clôche dans mon code, ça m'aiderait ...
Sujet clos
Aller à