Zarovnávání textu s CSS

Pavel Salvet  /  27. 11. 2008, 10:19

Protože není nikdo, pro koho by zarovnávání textu byla věc neznámá, není tudíž zapotřebí dané téma nijak zvlášť představovat ani rozvádět. Velmi stručný, skoro heslovitý kompletní a komplexní přehled s tabulkami, příklady, ukázkami a neužvaněnými komentáři je vhodný pro základní orientaci a případně připomenutí pozapomenutého a jako takový bude jistě užitečný.

Horizontální zarovnávání

Horizontální zarovnávání textů, ať už na řádku, nebo v tabulce, se dělá prostřednictvím dobře známé vlastnosti text-align, která zarovnává text čtyřmi možnými způsoby. Podle standardů by se v tabulkách ještě mělo dát zarovnat obsah buňěk podle znaku, např. desetinné čárky, jenže v prohlížečích to implementováno není.
 

Vlastnost text-align
Hodnota Popis zarovnání
inherit zděděné
left doleva
right doprava
center do středu
justify do bloku


Hodnota justify by se měla používat trochu s rozvahou, protože když jsou sloupce příliš úzké, vznikají při použití této hodnoty mezi slovy přílišné mezery, což kazí nejen estetický dojem, ale také se to hůře čte. Navíc prohlížeče neroztahují nezalomitelnou mezeru ( ) a velikostní rozdíly mezi oběma typy mezer jsou tak v textu někdy nepříjemně patrné. Přiložený screenshot mluví za vše.

zarovnávání s justify


Někdy je vhodné, aby se slova nebo jiné in-line objekty (např. obrázky) na řádku rovnoměrně rozprostřely. Nejprogresivnější způsob, jak tohoto efektu dosáhnout, spočívá v tom, že se in-line objektům udělí povaha tabulkových buněk. Dlužno ovšem dodat, že to vždy není způsob zcela ideální, neboť šířka buněk se doplňuje nestejnoměrně v závislosti na šířce obsahu a vizuálním výsledkem jsou nepravidelné rozestupy mezi in-line objekty. A navíc Internet Explorer doposud neumí interpretovat tabulkové hodnoty vlastnosti display, a tak následující příklad bude funkční nejdříve pravděpodobně až v jeho osmé verzi, která se už chystá.
 

p {display: table; width: 100%}
p>span {display: table-cell}


V tabulkách je často potřeba nastavit různá zarovnání buňkám v různých sloupcích. Pro tento účel by se výtečně hodil prvek col nebo colgroup. Bohužel příslušná specifikace dovoluje na tyto prvky aplikovat jen vlastnosti background, border, width, visibility, další už ne (IE to porušuje), a tak na řadu přichází komplikovanější metoda:
 

td:first-child {text-align: center} /* první sloupec do středu */
td:first-child+td {text-align: right} /* druhý sloupec doprava */


Vertikální zarovnávání na řádku

Vlastnost vertical-align
Hodnota Popis zarovnání
inherit zděděné
baseline na linku
top úplně nahoru
bottom úplně dolů
middle na střed
text-top k hornímu okraji fontu nadřazeného elementu
text-bottom k dolnímu okraji fontu nadřazeného elementu
super horní index
sub dolní index


Jako hodnotu lze použít i délkovou míru nebo procenta (vztahují se k výšce řádku), což odsadí text od linky na požadovanou vzdálenost. K větší názornosti zajisté přispěje ukázkový řádek (s dvojnásobnou výškou), na němž jsou popisované hodnoty ukázány v příslušné vertikální pozici.

baseline top middle bottom text-top text-bottom super sub 30%


Vertikální zarovnávání v bunce

Obsah tabulkových buněk se rovněž zarovnává prostřednictvím vlastnosti vertical-align. Ta má zde ovšem pouze čtyři použitelné hodnoty, zbývající (např. super) se budou interpretovat stejně jako baseline.
 

Vlastnost vertical-align
Hodnota Popis zarovnání
inherit zděděné
baseline na první linku řádku
top úplně nahoru
bottom úplně dolů
middle na střed

 

vertikální zarovnání buňek


Zdroje

Neprehliadnite: