Zarovnání textu na střed není (doufám) problém; stačí použít:
.center { text-align: center; }
Problém ale nastane, pokud chceme zarovnat kontejner uvnitř jiného kontejneru.
S tím nám pomůže automatický margin:
.parent { display: block; width: 300px; } .child { display: block; width: 200px; margin: 0 auto; }
Nastavením marginu na auto říkáme prohlížeči, že chceme, aby obě protilehlá odsazení měla stejnou velikost. Tím logicky vznikne efekt zarovnání na střed.
Automatický margin platí pouze na element typu block; naopak zarovnání textu platí na inline elementy.
Rychlá navigace
Vertikální zarovnání
Horizontální (zleva doprava) je jednoduché, ale se zarovnáním zhora dolu se trochu zapotíte – tedy pokud vám nestačí podpora jen v novějších prohlížečích (IE11+, Firefox 28+, Chrome 21+, Safari 9+):
.parent { display: flex; flex-flow: column; align-content: center; width: 300px; } .child { display: block; width: 200px; flex: 0 0 200px; }
Flexbox je nový nástroj na vytváření layoutu a jednou z jeho vlastností je to, že dokáže zarovnávat prvky uvnitř kontejneru.
Pokud chcete flexbox využít i v IE10, musíte použít speciální zápis (tzv. Tweener):
.parent { display: -ms-flexbox; -ms-flex-flow: column; -ms-flex-align: center; width: 300px; }
Ještě existuje jedna stará verze flexboxu pro Safari 3.1+ a Firefox 4+:
.parent { display: -webkit-box; display: -moz-box; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-align: center; -moz-box-align: center; width: 300px; }
Zarovnání více prvků
Výše uvedené kódy ale platí jen v případě, že uvnitř kontejneru je jen jeden prvek. Pokud jich máte více a chcete je vedle sebe zarovnané na střed (nebo nahoru či dolu), můžete flexbox použít jen v novějších prohlížečích:
.parent { display: flex; flex-flow: row; align-content: center; justify-content: center; width: 300px; } .child1, .child2 { display: block; width: 100px; flex: 0 0 100px; }
Pomocí align-content a justify-content pak můžete řídit, kam se prvky zarovnají. Více viz popis Flexboxu.
Zarovnání jako text
Pro starší prohlížeče můžete zarovnat pouze text pomocí vlastnosti vertical-align
. Aby tato vlastnosti fungovala i na blokové prvky, musíte na prvky použít display: inline-block
:
.parent { display: block; width: 300px; } .child1, .child2 { display: inline-block; text-align: center; vertical-align: center; width: 100px; }
Hodnota inline-block
je podporována od IE8 a Firefox 3, což by dnes už neměl být problém. Firefox 2 podporuje -moz-inline-block
.
Pokud byste potřebovali podporu i ve starších prohlížečích (IE7) nebo vertikální zarovnání z nějakého důvodu nefungovalo, budete muset použít tabulkový layout:
.parent { display: table; width: 300px; } .child1, .child2 { display: table-cell; text-align: center; vertical-align: center; width: 100px; /* bude mít 150px!!! */ }
Pozor ale na to, že zatímco u flexbox
a inline-block
je možné zarovnat prvky na střed při zachování dané velikosti, tak u tabulky musí sloupce vyplnit celý prostor. Výše uvedená tabulka tedy bude mít sloupce 150px široké. Pokud byste chtěli zachovat sloupce 100px široké, museli byste šířku tabulky snížit na 200px a přidat jí margin: 0 auto
. V tabulce se též prvky nemohou automaticky zalomit na další řádek.
Absolutní zarovnání
Pokud máte kontejner s pevnou velikostí a v něm jen jeden prvek, můžete ho zarovnat pomocí absolutního pozicování:
.parent() { position: relative; width: 300px; height: 200px; } .child { position: absolute; width: 200px; height: 100px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%) -ms-transform: translate(-50%, -50%); -o-transform: translate(@x, @y); transform: translate(-50%, -50%); }
Pozici nahoře nebo vlevo nastavíte tím, že top
nebo left
nastavíte na nulu a dáte nulovou odpovídající hodnotu translate
. Pozici dole nebo vpravo pak nastavíte tak, že top
nebo left
nastavíte na auto
a přidáte bottom: 0
nebo right: 0
.
Zápis transform bez prefixu funguje od IE10, Firefox 16, Chrome 36, Opera 23 (a také v 12), Safari 9 a Android 5. V prohlížečích IE8, Firefox 3, Opera 10 a všech jejich starších verzích nejde transform použít.