Budowniczy.net » Budowniczy » Artykuły » Kłopotliwe vertical-align
Kłopotliwe vertical-align
- Wprowadzenie
- Elementy liniowe: baseline | middle | sub | super | text-top | text-bottom | <lenght> | top | bottom
- Tabele: top | middle | bottom
- Specyfikacje i linki
Wprowadzenie
Jednym z zagadnień CSS, przy którym zawodzi intuicja, jest własność vertical-align. Własność text-align wyrównuje w poziomie zawartość elementu względem środka, lewej lub prawej krawędzi, albo justuje. Można by więc oczekiwać, że vertical-align będzie zachowywała się podobnie w pionie. I dzieje się tak w przypadku komórek tabeli. Ale w pozostałych przypadkach spotka nas zaskoczenie - przy użyciu tej zawartości nie uda się ustawić zawartości w połowie wysokości. Zatem definiując vertical-align:middle uzyskamy poniższy efekt w przypadku komórki tabeli, ale w akapicie już nie.
Powodem tego jest fakt, że, wbrew intuicji, własność vertical-align nie wyrównuje zawartości bloku względem jego dolnej lub górnej krawędzi. Własność ta ustawia element inline (jakim jest również domyślnie obrazek) względem linii pisma. Na potrzeby artykułu wystarczy uproszczona poniższa definicja (więcej informacji: linie pisma w Wikipedii)
Dlatego też błędne jest przypisywanie tej własności elementom, takim jak p lub div, i oczekiwanie, że ich zawartość zostanie np. wyśrodkowana w pionie. Są to elementy blokowe, zaś własność stosuje się do elementów liniowych.
Poniższe przykłady ilustrują różne wartości vertical-align. W pierwszych akapitach przykładów własność została przypisana wyróżnionemu słowu, zaś w drugich akapitach - kwadratowemu obrazkowi. W niektórych przykładach dodane są też wielkie litery "Ś", jako że górna linia tekstu znajduje się nie nad górną krawędzią wielkich liter, ale jeszcze wyżej - nad przestrzenią zarezerwowaną dla znaków diakrytycznych. W innych przykładach dodaliśmy drugi pionowy obrazek, wyższy od obrazka testowego. Testowe słowo jest też wyróżnione większą czcionką, aby lepiej było widać, do której krawędzi jest wyrównywane, co przy tym samym rozmiarze czcionki nie zawsze jest jasno widoczne.
Na pierwszy rzut oka przykłady z obrazkami mogą kojarzyć się trochę z własnością float. Jest to oczywiście błędne skojarzenie, bo obrazki nie są w żaden sposób oblewane tekstem. Przeciwnie, to obrazek jest ustawiany względem linii tekstu.
Elementy liniowe
Wartość baseline
Jest to wartość domyślna. Linia bazowa elementu lub dolna krawędź obrazka wyrównuje się z linią bazową zawartości. Słowo "test" znajduje się na tej samej wysokości, co otaczające wyrazy. Obrazek wydaje się być trochę wyżej, a to z racji wspomnianego wyrównania do linii bazowej. Jest on na tej samej wysokości, co dolna krawędź liter takim jak "m" czy "n", nie zaś litery "p".
Wartość middle
Wyrównuje środek całego elementu (nie środek jego małych liter) ze środkiem małych liter zawartości.
Wartość sub
Przy tej wartości mamy element wyrównany z linią bazową dolnego indeksu, zatem element jest przesunięty w dół względem normalnego tekstu.
Wartość super
Wartość super wyrównuje względem linii bazowej indeksu górnego, czyli element przesuwa się ponad linię bazową zwykłego tekstu.
Wartość text-top
Wartość ta wyrównuje względem górnej krawędzi czcionki. Aby lepiej pokazać tę wartość, wstawiliśmy drugi, wyższy obrazek, który jest wyrównany domyślnie, czyli względem linii bazowej. Widzimy, że górne krawędzie naszych elementów testowych wyrównane są w tym przypadku z górną krawędzią litery "Ś", nie zaś górną krawędzią drugiego obrazka, która znajduje się o wiele wyżej. Porównaj z wartością top.
Wartość text-bottom
Wyrównuje względem dolnej krawędzi czcionki. Porównaj z wartością bottom.
Wartość <lenght>
Ustawia linię bazową elementu o zadaną wartość powyżej lub poniżej linii bazowej zawartości rodzica. W poniższym przykładzie elementom nadaliśmy vertical-align: 10px oraz vertical-align: -10px. Wartością mogą też być procenty, liczone względem wartości line-heigth.
Wartość top
Wyrównuje górę elementu z górą całej linii, czyli górą najwyższego elementu tej linii, a nie z górną krawędzią czcionki. Z górną krawędzią czcionki wyrównuje wartość text-top.
Wartość bottom
Wyrównuje dolną krawędź elementu z dołem całej linii, czyli dolną krawędzią najniżej położonego elementu, a nie z dolną krawędzią czcionki. Z dolną krawędzią czcionki wyrównuje wartość text-bottom. W przykładzie przesunęliśmy drugi obrazek w dół i widzimy, że to właśnie do jego dolnej krawędzi są wyrównywane elementy testowe.
Tabele
W przypadku tabeli wartości przypisywane są elementom th oraz td, a wyrównują się względem linii bazowej wiersza tabeli, czyli elementu tr. Trzeba przy tym pamiętać, że komórka, dzięki atrybutowi rowspan, może się rozciągać na więcej niż jeden wiersz.
Wartość top
Góra komórki jest wyrównana z górą pierwszego wiersza, na który się rozciąga.
Wartość middle
Środek komórki jest wyrównany ze środkiem wierszy, na które się rozciąga komórka.
Wartość bottom
Dół komórki jest wyrównany z dołem ostatniego wiersza, na który się rozciąga.
Pozostałe wartości, omówione przy elementach liniowych, nie stosują się do komórek tabeli.
Specyfikacje i linki
Pełną specyfikację własności vertical-align można znaleźć w sieci pod adresem: http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align.
Zachowanie własności w komórkach tabeli jest szczegółowiej opisane tutaj: http://www.w3.org/TR/CSS21/tables.html#height-layout
Komentarze
Ten artykuł możesz skomentować na witia.jogger.pl
RSS 2.0
