Text-align

CSS vlastnost text-align určuje zarovnání odstavce nebo jiného bloku.

text-align
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.

Funguje to dovnitř

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.

Vlastnost text-align má ovlivňovat pouze řádkové prvky uvnitř prvků blokových. Internet Explorer ve quirk módu ale chybně ovlivňoval zarovnání bloků uvnitř bloků. Což nevadí, ale občas to můžete vidět ve starých kódech. Centrování bloků vůči celé stránce (například centrování celé stránky) se má normálně udělat vlastnost margin. Např. centrování bloku dělá nastavením šířky a margin: 0px auto, přičemž to "auto" říká, že se má zbylý okraj (margin) nastavit automaticky, tedy rovnoměrně půl na půl. Důsledek je, že objekt uprostřed bude vlastně vycentrován.

novější hodnoty text-align
hodnoty zarovnání odstavce
start doleva, pokud se text píše zleva doprava. Doprava, pokud se text píše zprava doleva.
end doprava, pokud se text píše zleva doprava. Doleva, pokud se text píše zleva doprava.
justify-all jako justify, ale do bloku se zarovná i poslední řádek

Podpora

Všude velmi dobrá podpora hodnot left, center a right a justify.

Podpora vlastnosti text-align
Prohlížeč Podpora ve verzích
Internet Explorer, Edge všechny verze
Firefox všechny verze
Opera všechny verze
Safari všechny verze
Chrome všechny verze

Příklady

<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, poslední řádek doleva</p>

Vycentrování bloku

Pokud chcete mít na stránce nějaký obdélníkový prvek vycentrovaný, používá se centrování pomocí margin: auto:

<div style="width: 400px; margin: 0px auto">
  nějaký vystředěný obsah
</div>

Nastavení margin: auto v podstatě znamená, že chcete, aby levý a pravý okraj byly nastaveny automaticky, tedy stejně. Což je trik, který blok vystředí. Důležité je ale bloku nastavit šířku, jinak bude mít šířku 100% a žádné centrování nebude patrné.

Jak vycentrovat celou stránku

Další příklady

Centrovaný CSS pozicovaný design

Justify a moralizování

Č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-justify

V případě použití text-align: justify (a jen tehdy) se dá pro Internet Explorer použít ještě vlastnosti text-justify. Text-justify má hodnoty auto, distribute (východní Asie), distribute-all-lines (v bloku i poslední řádek), inter-cluster (zlomy řádků i uvnitř slov - nikde nefunguje), inter-ideograph (?), inter-word (pouze pomocí mezer mezi slovy), newspaper (normálně prostrkává mezi slovy i mezi znaky) a kashida (arabština).

Jediná zásadně zajímavá hodnota je distribute-all-lines, která (v Exploreru) způsobí roztažení posledního řádku i pomocí mezislovních mezer tak, aby poslední řádek vyšel od kraje do kraje. Občas to vypadá příšerně, když ten poslední řádek obsahuje příliš mnoho textu.

Zatím jsem to víc netestoval.

Zarovnání posledního řádku

Vlastnost text-align-last s hotnotami left righ center justify nefunguje pouze v Safari a iOS Safari.

Zarovnání na desetinnou čárku

V tabulkách mi obvykle vadí, že nejsou zarovnaná čísla. Word umí zarovnat sloupec s čísly na desetinnou čárku už 30 let, ale HTML a CSS to neumí ještě ani v roce 2019. Dlouho bylo jediným řešením mít u všech čísel stejný počet číslic a zároveň použít neproporcionální font, aby byly desetinné čárky pod sebou. Vlastně se to musí dál dělat takto, ale novinka je CSS vlastnost font-variant-numeric. Ta umožňuje různá nastavení podoby číslic, ale pro mě je nejzajímavější nastavení

font-variant-numeric: tabular-nums;

což zařídí, že všechny číslice budou stejně široké.

Poslední aktualizace 26. září 2018

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.