text-align Zarovnávání

Častou chybou bývá snaha zarovnat touto vlastností objekt samotný. Vlastnost text-align zarovnává obsah elementu, nikoliv element samotný. Např. img {text-align: center} nezarovná obrázek na střed. Neudělá nic, protože obrázek je nahrazovaný element a žádný obsah nemá, není tedy co zarovnávat. Pokud tedy chceme obrázek zarovnat pomocí vlastnosti text-align, musíme tuto vlastnost přiřadit elementu, ve kterém se obrázek nachází, např. div {text-align: center}

Vlastnost zarovnává text a obrázky uvnitř blokových elementů. Internet Explorer tuto vlastnost interpretuje špatně a zarovnává i blokové elementy uvnitř blokových elementů.

left vlevo

Zarovnává text „na levý praporek”, tedy tak, že levý okraj je zarovnaný a pravý nezarovnaný. Tato hodnota je výchozí pro většinu elementů v jazycích, kde se čte zleva doprava (direction:ltr), což jsou nám běžně známé jazyky.

<p style="text-align:left">Toto je ukázka zarovnávání vlevo.</p>

Toto je ukázka zarovnávání vlevo.

right vpravo

Zarovnává text „na pravý praporek”, tedy tak, že pravý okraj je zarovnaný a levý nezarovnaný. Tato hodnota je výchozí pro většinu elementů v jazycích, kde se běžně čte zprava doleva (direction:rtl)

<p style="text-align:right">Toto je ukázka zarovnávání vpravo.</p>

Toto je ukázka zarovnávání vpravo.

center na střed

Při zarovnávání na střed je každý řádek na obě strany od středu stejně dlouhý. Toto zarovnání je výchozí hodnotou např. u elementu th.

<p style="text-align:center">Toto je ukázka zarovnávání na střed.</p>

Toto je ukázka zarovnávání na střed.

justify do bloku

Zarovnávání textu „na oba praporky” se používá hlavně v tištěných dokumentech, použití na webu není příliš vhodné (čtenář se snadno na řádku ztratí). Zvláště nevhodné je pak jeho použití u užších bloků textu, kde vznikají velké „díry” mezi slovy a nevypadá to moc dobře.

<p style="text-align:justify">Toto je ukázka zarovnávání do bloku.</p>

Toto je ukázka zarovnávání do bloku.