Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS]Wysokość pola w osi Y
Calibri
post
Post #1





Grupa: Zarejestrowani
Postów: 26
Pomógł: 4
Dołączył: 22.07.2011

Ostrzeżenie: (0%)
-----


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:
  1. <ul>
  2. <li><a href=""><span>Link 1</span></a></li>
  3. <li><a href=""><span>Link 2</span></a></li>
  4. <li><a href=""><span>Nieco dłuższy tekst odnośnika</span></a></li>
  5. </ul>


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ć. sad.gif
Go to the top of the page
+Quote Post
Sephirus
post
Post #2





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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

Potraktujmy więc A jako TD dodając mu

  1. display: table-cell;
  2. vertical-align: middle;


wink.gif


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 19.08.2025 - 20:22