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