Kaskadowe arkusze stylów CSS: pionowe wyrównanie









Tematy: pozycjonowanie | odległości | pionowe wyrównanie | przepływanie i oblewanie | stos







Strona główna kursu
Style
Wstęp
Narzędzia
Budowa stylu
Selektory
Kaskadowość i dziedziczenie
Wstawianie stylów
Jednostki miary
Własności czcionek
Własności tekstu
Kolor i tło
Marginesy i odstępy
Obramowania
Wykazy
Tabele
Rozmiary
Pozycjonowanie
Wyświetlanie
Obrys
Własności drukowania
Zawartość generowana
Suwaki







Pionowe wyrównanie



Dane w pigułce


Zastosowanie
ustala pionowe wyrównanie elementów względem siebie


Dziedziczenie
nie


Wartości
baseline, middle, top, bottom, text-top, text-bottom, super, sub, długość w jednostkach, procent


Wartość domyślna
baseline


Przykład
vertical-align:super


Uwagi



Odpowiednik w HTML
atrybuty align, valign



Aby zdefiniować pozycję elementu, należy wpisać w definicji stylu vertical-align: wartość.

Parametr vertical-align pozwala ustalać pionowe relacje elementów strony. Do dyspozycji mamy m.in. wartości:

<img src="../grafika/car1.gif" width="376" height="188" alt="pan samochodzik" style="vertical-align: middle">tekścik

middle

<img src="../grafika/car1.gif" width="376" height="188" alt="pan samochodzik" style="vertical-align: baseline"> tekścik

baseline

<p>normalny akapit <span style="vertical-align: 3mm"><b>podniesienie tekstu</b></span> dalszy ciąg akapitu.</p>

normalny akapit podniesienie tekstu o 3mm dalszy ciąg akapitu.

<p>normalny akapit <span style="vertical-align: -20%"><b>opuszczenie tekstu</b></span> dalszy ciąg akapitu.</p>

Normalny akapit opuszczenie tekstu o 20% dalszy ciąg akapitu.

<p>normalny akapit <span style="vertical-align: sub"><b>użycie sub</b></span> dalszy ciąg akapitu.</p>

normalny akapit użycie sub dalszy ciąg akapitu.

<p>normalny akapit <span style="vertical-align: super"><b>użycie super</b></span> dalszy ciąg akapitu.</p>

normalny akapit użycie super dalszy ciąg akapitu.