Archiv štítku: center

Zarovnání na střed v kontejneru

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.

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%;
    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.

Obrázek v DIVu bez okrajů

Pokud umístíte obrázek do DIVu za tím účelem, aby se DIV velikostí přizpůsobil obrázku (a umožnil např. zadání více borderů, nebo absolutní pozicování přes obrázek), někdy se setkáte s tím, že DIV má dole malý okraj, který přesně nesedí na obrázku. Navíc se tento okraj nedá najít v debuggeru, protože nejde o padding ani margin.

<div class="imgWrapper">
    <!-- autosize DIV around IMG -->
    <img src="..." />
</div>

Pokračování textu Obrázek v DIVu bez okrajů

Centrovaný modální dialog bez JS

Chcete zobrazit modální dialog ve stránce, který je vždy centrovaný do středu obrazovky? To asi budete potřebovat hodně skriptů na jeho otevření, vypočtení velikosti, vycentrování a jeho udržování v obraze (např. při otočení telefonu). Viz demo.

Ale co kdyby tohle všechno šlo udělat jen pomocí HTML a CSS, nebylo by to super?

A představte si, že to jde!

Pokračování textu Centrovaný modální dialog bez JS

Jak vyplnit prostor mezi plovoucímy prvky?

Pokud používáte plovoucí prvky, asi narazíte na problém, že prvky, které je obtékají se chovají poněkud podivně a zasahují i do prostoru rezervovaného pro plovoucí prvky:

Left
Right
center
center
center

 

V případě textu obtékajícího obrázek, což je nejčastější použití v článcích, je to efekt očekávaný, ale co dělat, když potřebujete, např. ve speciálním layoutu webové aplikace, aby prostřední prvek vyplnil prostor mezi plovoucími prvky a přitom do nich nepřesahoval?

Řešení je kupodivu velice jednoduché – stačí prostředními prvku nastavit oveflow:hidden a prohlížeč, aby zabránil překrývání plovoucího prvku obsahem toho prostředního, změní jeho šířku.

Left
Right
center
center
center

 

Pokračování textu Jak vyplnit prostor mezi plovoucímy prvky?

Zobrazení stránky přes celé okno prohlížeče

U moderních stránek je často potřeba zobrazit obsah tak, aby vyplnil celé okno prohlížeče (např. kvůli pozadí, vycentrování horizontálně i vertikálně apod.). Většina designérů a programátorů většinou zkusí jako první krok CSS:

body { width: 100%; height: 100%; }

A když to nepřinese požadovaný efekt, tak přejdou k Javascriptu a velikost okna počítají dynamicky.

K tak drastickým řešením ale není důvod a stejného efektu lze dosáhnout i pomocí CSS, jen je potřeba vědět, co nastavit:

html, body { width: 100%; height: 100%; }

Stačí kromě BODY nastavit styl i na HTML, které každou stránku obklopuje, a jako zázrakem se celá stránka roztáhne. Pak již můžete nastavit pozadí automaticky zvětšené a centrované na okno prohlížeče:

body {
    background: url('/images/page-bg.png')
            no-repeat scroll center center
            transparent;
    background-size: contain;
}

Nebo oblíbený obsah ve sloupci uprostřed stránky:

body {
    max-width: 1024px;
    margin: 1em auto;
}

Nebo patičku stránky zobrazenou vždy u dolního okraje okna (i když je obsah stránky menší):

body {
    /* zamezí překrytí obsahu patičkou */
    margin-bottom: 1EM;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%; /* nebo auto */
    height: 1EM;
}

Pozor na to, že pokud byste chtěli do BODY nastavit padding pro odsazení, bude problém s nastavením šířky (a výšky) na 100%. Ve výchozím nastavení se totiž padding nepočítá do šířky prvku a tak by jeho výsledná šířka byla { 100% + levý padding + pravý padding }.

Aby prohlížeč správně vypočetl 100% šířku, je potřeba změnit jeho výpočet na border-box:

body {
    width: 100%;
    height: 100%;
    padding: 1em; /* odsazení od okrajů */
    box-sizing: border-box; /* započítej
          padding do width a height */
}