Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Grafika

Pionowe wyrównanie

Email Drukuj PDF

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

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

pan samochodzik middle

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

pan samochodzik 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.


Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15342709