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]

align

OPIS

Atrybut definiuje wyrównanie względem innych elementów w poziomie lub w pionie. Różne elementy HTML korzystają z różnych wartości atrybutu, więc zwróć uwagę na miejsce jego użycia. W tekscie najczęściej wykorzystywane są wartości right, justify i center (left jest domyślną wartością). Elementy graficzne i formularze wykorzystują wartości top, middle i bottom.

WARTOŚCI

• left (dla wszystkich)

wyrównanie do lewej strony, wartość domyślna w poziomie

• center (dla: col, colgroup, div, h1, h2, h3, h4, h5, h6, hr, p table, tbody, td, tfoot, th, thead, tr)

wycentrowanie w poziomie

• right (dla wszystkich)

wyrównanie do prawej strony

• justify (dla: col, colgroup, div, h1, h2, h3, h4, h5, h6, p, tbody, td, tfoot, th, thead, tr)

wyrównanie do prawej i do lewej strony

• top (dla: caption, legend applet, iframe, img, input, object)

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

• bottom (dla: caption, legend applet, iframe, img, input, object)

wyrównanie w pionie do dolnej części, wartość domyślna w pionie

• middle (dla: applet, iframe, img, input, object)

wyrównanie w pionie do centralnej części

• char (dla: col, colgroup, tbody, td, tfoot, th, thead, tr)

wyrównanie względem określonego znaku w tabelach, np. względem przecinka w liczbach dziesiętnych - nie wszystkie przeglądarki obsługują tą wartość

POZOSTAŁE CECHY

• status: nie zalecany w elementach: applet, caption, div, h1, h2, h3, h4, h5, h6, hr, iframe, img, input, legend, object, p, table - zastąp stylami: text-align, vertical-align
• używany w elementach: applet, caption, col, colgroup, div, h1, h2, h3, h4, h5, h6, hr, iframe, img, input, legend, object, p, table, tbody, td, tfoot, th, thead, tr

PRZYKŁADY ZASTOSOWAŃ

• Przykład 1:

<h3 align="right">przykładowy tytuł z prawej strony</h3>

przykładowy tytuł z prawej strony

• Przykład 2:

<p align="center">przykładowy tekst na środku strony</p>

przykładowy tekst na środku strony

• Przykład 3:

<table align="center">
<caption align="bottom">podpis pod tabelą</caption>
<tr><td><p align="justify">
<img src="g/kamyki.jpg" align="right" alt="kamyki" />
Teraz musimy użyć znacznie więcej treści aby pokazać, jak będzie 
wyglądało formatowanie do lewej i do prawej strony. Na wszelki 
wypadek warto jeszcze raz powtórzyć poprzednie zdanie. Teraz 
musimy użyć znacznie więcej treści aby pokazać, jak będzie 
wyglądało formatowanie do lewej i do prawej strony. Jak widać
obie strony tekstu są idealnie równe. O to chodziło!
</p></td></tr></table>

• Przykład 4:

Zdanie, w którym wstawiono ogromne <img src="g/kamyki.jpg" align="top"
alt="kamyki" /> kamyki, ale tylko po to, 
aby pokazać co stanie się z obrazkiem przy różnych wartościach 
parametru align w większej ilości tekstu. Przykład praktyczny 
zastępuje dziesiątki słów.

• Przykład 5:

Zdanie, w którym wstawiono ogromne <img src="g/kamyki.jpg" align="middle"
alt="kamyki" /> kamyki, ale tylko po to, 
aby pokazać co stanie się z obrazkiem przy różnych wartościach 
parametru align w większej ilości tekstu. Przykład praktyczny 
zastępuje dziesiątki słów.

Zdanie, w którym wstawiono ogromne kamyki, ale tylko po to, aby pokazać co stanie się z obrazkiem przy różnych wartościach parametru align w większej ilości tekstu. Przykład praktyczny zastępuje dziesiątki słów.

• Przykład 6:

Zdanie, w którym wstawiono ogromne <img src="g/kamyki.jpg" align="bottom"
alt="kamyki" /> kamyki, ale tylko po to, 
aby pokazać co stanie się z obrazkiem przy różnych wartościach 
parametru align w większej ilości tekstu. Przykład praktyczny 
zastępuje dziesiątki słów.

Zdanie, w którym wstawiono ogromne kamyki, ale tylko po to, aby pokazać co stanie się z obrazkiem przy różnych wartościach parametru align w większej ilości tekstu. Przykład praktyczny zastępuje dziesiątki słów.