Kurs XHTML: 1.1, 1.0 / HTML: 4.01, 4.0, 3.2, 3.0, 2.0 / CSS: 2.1, 2.0, 1.0 z przykładami

[Start] • [Elementy XHTML/HTML] • [Atrybuty XHTML/HTML] • [Style CSS]
[0] [A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]

vertical-align

OPIS

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;

POZOSTAŁE CECHY

• CSS: 2.1, 2.0, 1.0
• dziedziczony: nie
• odpowiedniki HTML: align, valign

PRZYKŁADY ZASTOSOWAŃ

• Przykład 1:

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

Przykładowy tekst, gdzie część wyrazów obejmuje wartość "super"

• Przykład 2:

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

Przykładowy tekst, gdzie część wyrazów obejmuje wartość "sub"

• Przykład 3:

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

Przykładowy tekst, gdzie część wyrazów obejmuje 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ładowy tekst, gdzie część wyrazów obejmuje 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ładowy tekst, gdzie jest nieco liniejek zawierających grafikę 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ładowy tekst, gdzie jest nieco liniejek zawierających grafikę 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ładowy tekst, gdzie jest nieco liniejek zawierających grafikę 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

Tekst z grafiką 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

Tekst z grafiką 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>