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í 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í.
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.
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 */
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%
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.
Hodnota | Popis zarovnání |
---|---|
inherit | zděděné |
baseline | na první linku řádku |
top | úplně nahoru |
bottom | úplně dolů |
middle | na střed |
Copyright © 2002 - 2013 inet.sk, s. r. o. | Všetky práva vyhradené | Neprešlo jazykovou úpravou | ISSN 1336-1899
Využívame kvalitný webhosting za rozumnú cenu od Inet.sk