Własność CSS vertical-align

Własność CSS vertical-align określa pionowe położenie pola śródliniowego lub śródliniowo-blokowego względem wiersza tekstu lub zawartości komórki tabeli. To znaczy, że własność ta ma podwójne zastosowanie zależne od kontekstu.

Po pierwsze za jej pomocą można na przykład określić położenie obrazu względem wiersza tekstu, w którym się on znajduje albo umieścić wybrany fragment tekstu w indeksie górnym lub dolnym.

Po drugie własność ta umożliwia określenie pionowego rozmieszczenia zawartości komórek tabeli HTML.

Wartości i składnia

Własność vertical-align przyjmuje następujące wartości.

baseline

Ustawia linię bazową pisma elementu na równi z linią bazową pisma jego rodzica.

sub

Umieszcza element w indeksie dolnym jego rodzica.

super

Umieszcza element w indeksie górnym jego rodzica.

text-top

Ustawia górną krawędź elementu na równi z górną krawędzią fontu elementu nadrzędnego.

text-bottom

Ustawia dolną krawędź elementu na równi z dolną krawędzią fontu elementu nadrzędnego.

middle

Ustawia element na środku elementu nadrzędnego.

top

Ustawia górną krawędź elementu na równi z górną krawędzią całego wiersza.

bottom

Ustawia dolną krawędź elementu na równi z dolną krawędzią całego wiersza.

Liczba z jednostką długości

Podnosi lub opuszcza element o określoną wartość. Można stosować wartości ujemne.

Wartość procentowa

Podnosi lub opuszcza element o określony procent wysokości wiersza (reprezentowanej przez własność line-height). Można stosować wartości ujemne.

Znaczenie wartości w tabelach

W tabelach wartości baseline, sub, super, text-top, text-bottom, liczba z jednostką długości i wartość procentowa powodują ustawienie linii bazowej komórki tabeli na równi z linią bazową pozostałych komórek w wierszu, które są wyrównane do linii bazowej.

Wartość top ustawia górną krawędź dopełnienia komórki na równi z górną krawędzią wiersza.

Wartość middle wyśrodkowuje pole dopełnienia komórki w wierszu.

Wartość bottom ustawia dolną krawędź dopełnienia komórki z dolną krawędzią wiersza.

Przykłady

W poniższych przykładach czerwony kwadrat jest grafiką wstawioną do wiersza tekstu za pomocą elementu img, a czarne linie odpowiadają mniej więcej górnej i dolnej linii pisma.

Podsumowanie