Podsumowanie
Własność vertical-align określa wyrównanie pionowe elementów inline lub komórek tabeli.
- Wartość początkowa:
baseline - Stosowana do: elementy inline i komórki tabeli
- Dziedziczona: nie
- Media:
visual - Wartość wyliczona:
Składnia
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> | inherit
Wartości (dla elementów inline)
Większość wartości wyrównuje element w pionie w stosunku do jego rodzica:
- baseline
- Wyrównuje linię bazową elementu z linią bazową jego rodzica.
- sub
- Wyrównuje linię bazową elementu z linią bazową indeksu dolnego jego rodzica.
- super
- Wyrównuje linię bazową elementu z linią bazową indeksu górnego jego rodzica.
- text-top
- Wyrównuje górę elementu z górą czcionki elementu rodzica.
- text-bottom
- Wyrównuje dół elementu z dołem czcionki elementu rodzica.
- middle
- Wyrównuje środek elementu ze środkiem małych liter rodzica.
- <length>
- Ustawia linię bazową elementu o daną wartość powyżej linii bazowej jego rodzica.
- <percentage>
- podobnie jak wartość <length> z procentami będącymi procentem własności
line-height
Dla elementów, które nie mają linii bazowej, używana jest w zamian dolna krawędź marginesu.
Natomiast dwie wartości wyrównują element w pionie raczej względem całkowitej linii niż względem jego rodzica:
- top
- Wyrównuje górę elementu i jego potomków z górą całkowitej linii.
- bottom
- Wyrównuje dół elementu i jego potomków z dołem całkowitej linii.
Wartości ujemne są dozwolone.
Wartości (dla komórek tabeli)
- baseline (oraz sub, super, text-top, text-bottom, <length>, i <percentage>)
- Wyrównuje linię bazową komórki z linią bazową wszystkich innych komórek w wierszu, które są wyrównane względem linii bazowej.
- top
- Wyrównuje górną krawędź dopełnienia komórki z górą wiersza.
- middle
- Centruje obszar dopełnienia komórki względem wiersza.
- bottom
- Wyrównuje dolną krawędź dopełnienia komórki z dołem wiersza.
Wartości ujemne są dozwolone.
Przykłady
img {
vertical-align: bottom;
}
Uwagi
Specyfikacje
Zgodność z przeglądarką
Zobacz także
line-height, text-align, margin (auto)