[Impossible] Centrage vertical du texte d'un lien (block)

Bonjour bonjour !

Petite problématique, j'ai cherché un peu partout comment centrer verticalement grâce à css, mais tout tourne autour de ce qui ne m'interesse pas pour mon problème. ^^"

Je cherche "simplement" à centrer le texte verticalement dans un lien en display:block possédant une hauteur fixe, sachant que le texte peut se retrouver sur deux lignes !!

CSS
-----
a {
    display:block;
    height:30px;
    width: 100px;}


HTML
-----
<a href="#">Texte d'une seule ligne</a>
<a href="#">Texte de deux<br />lignes !</a>

Là, le texte va se caler en haut, évidemment.
J'ai découvert une technique qui consisterait à utiliser line-height suivi de vertical-align, mais survient le petit probleme du texte de deux lignes...

Sérieusement, je ne vois vraiment pas comment faire... :|

PS: Il faut toujours que je me retrouve dans des situations completement brambolesques... ^^
Modifié par Nigel (04 Jul 2006 - 13:12)

Nigel a écrit :
Sérieusement, je ne vois vraiment pas comment faire... :|

C'est hélas une des limites des CSS. Le web n'étant pas un média paginé, les possibilités de positionnement vertical sont limitées. Surtout si on ne connaît pas à l'avances les dimmensions des divers éléments.

J'avais pas bien lu tout a l'heure, en fait c'est le meme probleme que j'ai posté 1 heure après toi >.>

Gomen m(_ _)m

On pourrait utiliser display:table-cell + vertical-align... mais pas avec Internet Explorer bien sûr.
Modifié par Alan (03 Jul 2006 - 14:22)

Ok merci pour ta réponse mpop, mais n'y aurait-il pas un moyen de détourner le problème, en englobant le texte dans une balise <span> par exemple ?

Ca été une de mes tentatives aussi, en utilisant la propriété line-height pour le lien, pensant que cela allait s'appliquer uniquement à l'élément en ligne si j'applique aussi un line-height diférrent dans le span.

J'explique:

CSS 
------
a {
    border: 1px solid black;
    line-height: 30px;
    vertical-align:middle;}

a span {
    line-height:normal;}



HTML 
------

<a href="#"><span>Texte de deux<br />lignes !</span></a>

Sur le coup je me suis dit "J'ai trouvé !!!"
...ouais ben... non.
La propriété line-height du span n'est pas prise en compte. :'(
Modifié par Nigel (03 Jul 2006 - 14:26)

Ici, Raphaël propose une facon de faire :
http://forum.alsacreations.com/topic-4-15653-1-Le-chemin-de-lautonomie.html#p119649

a écrit :
On pourrait utiliser display:table-cell + vertical-align... mais pas avec Internet Explorer bien sûr.

Fichu IE ^^.

a écrit :

Ici, Raphaël propose une facon de faire :
http://forum.alsacreations.com/topic-4-15653-1-Le-chemin-de-lautonomie.html#p119649

Hmm.... moui, je vais tenter, après tout je connais la largeur et la longueur de mon texte !


Edit : Ouais mais non !! Je ne connais pas la hauteur de mon texte !
Il peut très bien faire deux lignes comme il peut en faire qu'une seule !
Du coup, cette technique ne peut pas marcher non plus
Modifié par Nigel (03 Jul 2006 - 15:02)

Nigel a écrit :
Ouais mais non !! Je ne connais pas la hauteur de mon texte !
Il peut très bien faire deux lignes comme il peut en faire qu'une seule !
Du coup, cette technique ne peut pas marcher non plus

De même pour l'utilisation d'un span. Vu que tu ne connais pas la hauteur de ton texte, c'est mal barré. À la rigueur, tu peux toujours mettre un minimum de padding pour ne pas avoir le texte collé contre le bord supérieur, et utiliser le display: table-cell pour avoir l'effet désiré dans les navigateurs qui le supportent… Graceful degradation, tout ça.

Oui, il est clair qu'on finit dans le bidouillage, autant abandonner l'idée et trouver autre chose en remplacement.
:/

Très dommage...