CSS vlastnost text-align určuje zarovnání odstavce nebo jiného bloku.
| hodnoty | zarovnání odstavce |
|---|---|
| left | doleva |
| center | na střed |
| right | napravo |
| justify | do bloku |
V Internet Exploreru funguje text-align i pro zarovnání blokových prvků uvnitř jiného bloku (což je v rozporu se specifikací).
Výchozí zarovnání je doleva. V jazycích, kde se píše zprava doleva, je výchozí zarovnání doprava. (Směr psaní by měla určovat nepodporovaná vlastnost direction.) Odstavec zarovnaný doleva se snaží mít levé okraje přesně pod sebou (popř. s výjimkou prvního řádku ovlivněného vlastností text-indent.)
Zarovnání do bloku (text-align: justify) se snaží mít levé i pravé okraje řádků přesně pod sebou. Prohlížeče toho dosahují zvětšováním mezislovních mezer. Poslední řádek odstavce zarovnaného do bloku se zarovnává doleva.
Je důležité si uvědomit, že vlastnost text-align ovlivňuje zarovnání vnitřku prvku, pro který je deklarována. Neovlivňuje zarovnání samotného prvku vůči jeho okolí. Jinak řečeno funguje to dovnitř, ne ven.
Podle specifikace vlastnost text-align má ovlivňovat pouze řádkové prvky uvnitř prvků blokových. Internet Explorer ale chybně ovlivňuje zarovnání bloků uvnitř bloků. To má normálně dělat vlastnost margin. Např. centrování bloku se v Mozille dělá nastavením margin: 0px auto. Explorer umí centrovat i bloky a zase neumí margin: auto.
Pro buňky tabulky se dá zapsat i text-align: ",", což by mělo texty ve sloupci tabulky zarovnat na desetinou čárku. Uvádí to specifikace. Dá se zarovnávat na jakýkoliv řetězec. Neviděl jsem, že by to někde fungovalo.
Všude velmi dobrá podpora hodnot left, center a right. Text-align: justify nefunguje v IE 3 a NN4.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 3, 4, 5, 5.5, 6 | ||
| Mozilla (Netscape 6+) | všechny verze | |
| Opera | 3, 4, 5, 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | ano |
<p style="text-align: right">Odstavec zarovnaný napravo</p>
<p style="text-align: center">Odstavec zarovnaný na střed</p>
<p style="text-align: justify">Odstavec zarovnaný do bloku</p>
V Exploreru se na vycentrování bloku stránky může použít text-align. Pro standardní prohlížeče se používá centrování pomocí margin: auto:
<div style="text-align: center">
<div style="text-align: left; width: 400px; margin: 0px auto">
nějaký vystředěný obsah
</div>
</div>
Centrovaný CSS pozicovaný design
Často se diskutuje, zda je dobré používat na webu text-align: justify. Podle mě není jeho použití na stránkách chybou, ale chápu, proč se na webu moc nepoužívá. Jde o dvě věci. V novinách jsou sloupce vedle sebe a potřebují mít nějaký hezký vzhled. Tam se zarovnání do bloku dobře hodí, protože dvěma sousedícím sloupcům to pomáhá v čitelnosti. Bez zarovnání do bloku by sousední sloupce vypadaly blbě. Nic takového jako sousední čtené sloupce se na webu moc hojně nevyskytuje, takže odpadá primární důvod pro použití vyblokovaného textu.
Druhá věc je dělení slov. Každý software pro sazbu novin má nástroj na dělení slov (to má dokonce i Word). Prohlížeče ale nic takového nemají (pokud vím). Při sazbě novin občas ve sloupcích zarovnaných do bloku vznikají nehezké řeky, ty se ale většinou zahladí dělením slov. Při použití zarovnání do bloku na webu se to dělením slov řešit nedá a tak jsou ty díry v textu opravdu velké a ošklivé. Obzvláště to je znát u úzkých sloupců. Na širokých stránkách jsem kdysi zarovnání do bloku používal, problémy s tím nebyly, ale pak jsem to zrušil, aby ta písmenka tak blbě neskákala při zužování okna.
Text-indent = odsazení prvního řádku, Word-spacing = mezislovní mezery, Margin: auto = vystředění prvku ve standardních prohlížečích
o tvorbě, údržbě a zlepšování internetových stránek