Centrování v CSS
Marek Prokop, vydáno/aktualizováno: 12.2.2002/13.07.2003
Dotaz na centrování prvků pomocí CSS bývá ve všech konferencích a diskusních fórech jedním z nejčastějších. Zatímco horizontální centrování textu pomocí vlastnosti text-align je evidentní, s centrováním blokových prvků a zejména s centrováním vertikálním je to již složitější.
Hned na úvod však upozorním, v čem vám tento článek nepomůže. Je to vertikální centrování bloku, jehož výška je dynamicky určena výškou jeho obsahu. Tato úloha se z pohledu CSS rovná kvadratuře kruhu a bez klentského skriptování je neřešitelná.
Co se tedy v článku dozvíte? Skoro vše ostatní, konkrétně:
- Jak vodorovně vycentrovat blok s plovoucí šířkou.
- Jak vodorovně vycentrovat blok s pevnou šířkou.
- Jak vodorovně i svisle vycentrovat blok s plovoucí šířkou.
- Jak vodorovně i svisle vycentrovat blok s pevnou šířkou.
Horizontální centrování boxu s plovoucí šířkou
Horizontální centrování boxu s plovoucí šířkou se nejčastěji používá pro jednoduchý, čistě pomocí CSS vytvořený layout stránky. Hlavní výhoda takového layoutu spočívá v tom, že šířka hlavního textového sloupce je menší než šířka okna prohlížeče (a text je tedy lépe čitelný) a současně je tento sloupec v okně vycentrován (a není tedy ošklivě nalepen na levý okraj).
Popisované řešení však lze kromě celého layoutu stránky použít i pro vodorovné centrování dílčích blokových prvků v rámci jejich rodičů. Typickým příkladem může být centrování seznamů, tabulek, obrázků, apod.
Princip řešení je velmi jednoduchý a funkční v podstatě ve všech prohlížečích, které alespoň částečně podporují CSS 1. Spočívá pouze v tom, že centrovanému prvku určíme stejně veliké hodnoty vlastností margin-left (levý okraj) a margin-right (pravý okraj). Centrovaný prvek pak nesmí mít explicitně určenou šířku (vlastnost width), která tak zaujme celou zbývající šířku svého rodiče.
Velikost okrajů může být definována pevně, např. v pixlech, takto:
margin-left: 50px;
margin-right: 50px; nebo dynamicky v procentech (z šířky rodičovského prvku):
margin-left: 15%;
margin-right: 15%; Připravil jsem pro vás ukázkový příklad, ve kterém jsou všechny vlastnosti centrovaného prvku definovány takto:
#page {
margin: 5% 15%;
padding: 1em;
border: 2px solid #cc9;
color: #000;
background : #fff none;
} Každý ze svislých okrajů tedy bude široký 15% rodičovského prvku, kterým je v uvedeném příkladu prvek <body>.
Horizontální centrování boxu s pevnou šířkou
Pokud potřebujete horizontálně vycentrovat blokový prvek o pevné šířce, můžete prostudovat tento příklad. Dle normy CSS by měla stačit tato sada pravidel:
width: 550px;
margin-left: auto;
margin-right: auto; Ta určuje, že vnitřní šířka prvku má být 550px a zbytek šířky rodičovského prvku se má rovnoměrně rozdělit mezi levý a pravý okraj (margin).
Potíž je ale v tom, že margin: auto neumí IE 5/Win (a samozřejmě ani 4). Pro něj musíme použít trik, který využívá jiné chyby IE spočívající v tom, že vlastnost text-align v rozporu s normou zarovnáná i blokové prvky. V rodičovskému prvku tedy určíme centrování pomocí
text-align: center a v centrovaném prvku zarovnání zase vrátíme zpět pravidlem
text-align: left Pokud bude rodičovský prvek obsahovat nějaké další prvky, budou také vycentrovány, takže raději použijte jako rodiče samostatný, pro tento účel vytvořený <div>.
Horizontální i vertikální centrování boxu s plovoucí šířkou
S požadavkem na vertikální centrování bloků na obrazovce se již dostáváme na poněkud tenký led. Centrovaný blok bude vždy mít buď pevnou, tj. autorem určenou velikost, nebo velikost plovoucí, závislou na velikosti okna prohlížeče. Pokud se do takového bloku nevejde jeho obsah, máme problém
Pokud velikost obsahu centrovaného prvku znáte, je vše snadné. V opačném případě ale musíte použít vlastnost overflow s hodnotou auto, nebo scroll, aby obsahem šlo svisle rolovat. Kód tak bude kompatibilni jen s IE 4+ a NN 6. Opera 5, která jinak zvládá CSS velmi dobře, bude bezmocná.
Princip řešení spočívá v absolutním pozicování centrovaného prvku procenty. Nejprve určíte procenty rozměry centrovaného prvku, např. takto:
width: 80%;
height: 70%; a pak jeho pozici tak, aby byl prvek umístěn ve středu svého rodiče. Pro výše uvedené rozměry tedy bude pozice definována takto:
position: absolute;
left: 10%;
top: 15%; Platí to ale jen v případě, že centrovaný prvek nemá žádný padding či border, nebo při zobrazení v IE 5/Win, který špatně počítá velikosti bloků. Ve vzorovém příkladu je proto definice o něco složitější:
#page {
width: 80%;
height: 70%;
padding: 2%;
border: 2px solid #cc9;
position: absolute;
top: 15%;
left: 10%;
overflow: auto;
color: #000;
background : #fff none;
voice-family: "\"}\"" ;
voice-family: inherit;
top: 13%;
left: 8%;
} Kromě pravidla overflow: auto je na konci pozice předefinována tak, aby kompenzovala padding o velikosti 2%. Vlastnost voice-family je trik k ošálení IE — ten na těchto pravidlech skončí (pokračuje až dalším selektorem ve stylesheetu) a předefinici pozice tedy ignoruje.
Správně by měl být kompenzován i dvoupixelový border, ten však ovlivňuje centrování prakticky nepostřehnutelně.
Tento postup není vhodný pro prvky vnořené hluboko ve struktuře dokumentu, který nepoužívá absolutní pozicování, neboť absolutně pozicovat lze prakticky jen prvky umístěné přímo v <body>, nebo v jiných absolutně pozicovaných rodičích.
Horizontální i vertikální centrování boxu s pevnou šířkou
Poslední úlohou tohoto článku je horizontální i vertikální centrování boxu s pevnou šířkou. Opět musíme pamatovat na velikost obsahu centrovaného bloku (a případně použít vlastnost overflow) a opět použijeme absolutní pozicování. Tentokrát však pozici bloku nelze definovat jen v procentech — místo toho použijeme procenta a záporné okraje.
Začneme podobně, jako v předešlém případě tím, že určíme rozměry bloku, tantokrát však nikoli v procentech, ale v pixelech.
width: 550px;
height: 300px; Poté prvek "posadíme" pomocí absolutního pozicování a procent tak, aby se jeho levý horní roh nacházel přesně ve středu rodičovského prvku:
position: absolute;
top: 50%;
left: 50%; Na závěr prvek posuneme zápornými okraji (margin) o polovinu jeho výšky nahoru a polovinu jeho šířky vlevo:
margin: -150px 0 0 -275px; Nepřipomínám vám to návod na vyjmutí ježka z klece ;-)
Vzorový příklad opět používá trochu komplikovanější řešení, které centrovanému prvku přidává padding a border, což je třeba zohlednit při výpočtu záporných okrajů a obejít pro IE 5/Win:
#page {
width: 550px;
height: 300px;
padding: 10px;
border: 2px solid #cc9;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -275px;
overflow: auto;
color: #000;
background : #fff none;
voice-family: "\"}\"" ;
voice-family: inherit;
margin: -162px 0 0 -287px;
} Jako v předešlém případě i zde si musíte uvědomit, že absolutně pozicovat lze prakticky jen prvek přímo v <body>, nebo uvnitř jiného absolutně pozicovaného prvku. Metoda tedy není vhodná pro vertikální centrování prvků vnořených kdesi hluboko ve struktuře dokumentu, který jinak absolutní pozicování nepoužívá.
Odkazy na vzorové příklady
Na závěr ještě rekapitulace adres vzorových stránek:
