Bonjour,
C'est vrai que le “vertical-align” est bien tentant. Il parle de lui-même.
Voyons ce qu'en dit le
W3C :
a écrit :
Cette propriété agit sur le positionnement vertical à l'intérieur de la boîte de ligne des boîtes générées par un élément de type en-ligne. Les règles suivantes n'ont de sens que par rapport à un élément parent de type en-ligne, ou de type bloc si celui-ci génère des boîtes en-ligne anonymes ; elles sont inopérantes autrement.
C'est clair non ?
Comment ?
Non, pas très ?
En effet. C'est leur style (-;
Moi, je comprends, en gros, que ça ne fonctionne que pour un élément en-ligne lui-même placé dans un autre élément en-ligne.
Ça tombe bien, une image est un élément en-ligne (c'est pour ça qu'on peut la centrer verticalement avec “text-align:center;” Marrant, non ?).
Oui, mais… Un <p>, une <div> ne le sont pas.
Alors il faut trouver autre chose.
Il en est un bien pratique, neutre et en-ligne. C'est <span>.
Donc, plaçons l'image dans un <span> et appliquons le “vertical-align” à ce <span>.
Essayons.
.bolcimage { /* style du <span> */
vertical-align : middle;
text-align:center;
width:400px;
height:400px;
}
Zut, ça ne marche pas.
Reprenons plus attentivement notre lecture. On remarque :
a écrit :
S'applique à : ceux des éléments de type en-ligne et à l'élément 'table-cell'
.
Bon. Essayons.
.bolcimage { /* style du <span> */
display : table-cell;
vertical-align : middle;
text-align:center;
width:400px;
height:400px;
}
Mais… Ça marche.
Je viens de le tester (bon exercice).
Tu verras le résultat dans
cet exemple.
On vient de simuler une cellule d'un tableau.
Alors, si tu ne veux pas te casser la tête, rien ne t'interdit d'utiliser réellement une cellule <td> dans un tableau <table>.
Modifié par Gihef (08 Aug 2007 - 22:13)
