Nie piszcie mi że to już było, a nawet jak już było to nie za bardzo wiedziałem gdzie tego szukać.

Otóż rozchodzi mi się o obliczenie pozycji tekstu względem osi Y.

Mam taki kod:

[HTML] pobierz, plaintext 
<ul>
<li><a href=""><span>Link 1</span></a></li>
<li><a href=""><span>Link 2</span></a></li>
<li><a href=""><span>Nieco dłuższy tekst odnośnika</span></a></li>
</ul>
[HTML] pobierz, plaintext 

Pola <A> mają rozmiar: 123 na 53px;

Jeżeli ustawię height:53px i line-height:53px to będzie pasowało do dwóch pierwszych odnośników gdzie długość tekstu mieści się w <A> o szerokości width:123px

Kłopot będzie jeśli powyższy height i line-height podejdzie do trzeciego odnośnika. Wtedy to tekst który przeleje się do drugiej linii (dwie linie tekstu w boksie odnośnika) dostanie taki sam odstęp co pierwsza linia - dwie linie będą rozstrzelone na 53px.

Z drugiej strony jeśli <SPAN> dostanie zamiast height i line-height padding:3px 0 to trzeci odnośnik będzie ładnie wyśrodkowany po osi Y, a dwa pierwsze nie będą wyśrodkowane w osi Y.

Próbowałem trik z vertical-align:middle ale to działa jedynie w <TD>.


W związku z tym mam pytanie: czy idzie w CSS zmontować tak kod, aby i dla linków z tekstem w dwóch liniach, i dla linków z tekstem w jednej linii dałoby się wyśrodkować po osi Y ?



Ciekawostka: CSS4 będzie posiadać taką właściwość że będzie można obliczać rozmiar na podstawie innych właściwości innych bloków w kodzie. Niestety na to trzeba będzie poczekać.

Sam napisałeś że vertical-align ma tylko TD

Potraktujmy więc A jako TD dodając mu

[CSS] pobierz, plaintext 
display: table-cell; 
vertical-align: middle;
[CSS] pobierz, plaintext