Styl definiuje wyrównanie w pionie.

WARTOŚCI

• baseline - CSS: 2.1, 2.0, 1.0

wyrównanie do lini bazowej, wartość domyślna

• sub - CSS: 2.1, 2.0, 1.0

indeks dolny

• super - CSS: 2.1, 2.0, 1.0

indeks górny

• top - CSS: 2.1, 2.0, 1.0

wyrównanie do górnej części elementów

• text-top - CSS: 2.1, 2.0, 1.0

wyrównanie do górnej lini tekstu

• text-bottom - CSS: 2.1, 2.0, 1.0

wyrównanie do dolnej lini tekstu

• middle - CSS: 2.1, 2.0, 1.0

wyrównanie do środkowej części elementów

• bottom - CSS: 2.1, 2.0, 1.0

wyrównanie do dolej części elementów

• procenty - CSS: 2.1, 2.0, 1.0

wartość wyrażona w procentach - dodatnie przesuwają element w górę, ujemne w dół

• długość wyrażona w [px|mm|cm|in|pt|pc|em|ex] - CSS: 2.1, 2.0

wartość dodatnia (ponad linię bazową) lub ujemna (poniżej lini bazowej)

• inherit - CSS: 2.1, 2.0

przejęcie wartości "rodzica", np. vertical-align: inherit;

Przykład 1:

Przykładowy tekst, gdzie
<span style="vertical-align: super;">
część wyrazów obejmuje </span> wartość "super"

Przykład 2:

Przykładowy tekst, gdzie
<span style="vertical-align: sub;">
część wyrazów obejmuje </span> wartość "sub"

Przykład 3:

Przykładowy tekst, gdzie
<span style="vertical-align: text-top;">
część wyrazów obejmuje </span> wartość "text-top"

Przykład 4:

Przykładowy tekst, gdzie
<span style="vertical-align: text-bottom;">
część wyrazów obejmuje </span> wartość "text-bottom"

Przykład 5:

Przykładowy tekst, gdzie jest nieco liniejek
<img src="g/tlo.gif" width="50" height="50" alt=""
style="vertical-align: top;" />
zawierających grafikę
<img src="g/tlo.gif" width="50" height="50" alt=""  />
aby lepiej przedstawić efekt wyrównywania.

Przykład 6:

Przykładowy tekst, gdzie jest nieco liniejek
<img src="g/tlo.gif" width="50" height="50" alt=""
style="vertical-align: bottom;" />
zawierających grafikę
<img src="g/tlo.gif" width="50" height="50" alt=""  />
aby lepiej przedstawić efekt wyrównywania.

Przykład 7:

Przykładowy tekst, gdzie jest nieco liniejek
<img src="g/tlo.gif" width="50" height="50" alt=""
style="vertical-align: middle;" />
zawierających grafikę
<img src="g/tlo.gif" width="50" height="50" alt=""  />
aby lepiej przedstawić efekt wyrównywania.

Przykład 8:

Tekst z grafiką
<img src="g/tlo.gif" width="50" height="50" alt=""
style="vertical-align: -70%;" />
obrazujący użycie procentów

Przykład 9:

Tekst z grafiką
<img src="g/tlo.gif" width="50" height="50" alt=""
style="vertical-align: 70%;" />
obrazujący użycie procentów

Przykład 10:

<style type="text/css"><!--
img { vertical-align: bottom; }
sub { vertical-align: sub; }
p.top { vertical-align: top; }
p.gora { vertical-align: 200%; }
--></style>