Archiv štítku: position

Zarovnání na střed v kontejneru

Zarovnat text 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.

Absolutní nebo procentuelní pozicování uvnitř kontejneru

Pokud chcete použít absolutní pozicování nebo nastavení rozměrů pomocí procent, ale pouze v rámci určitého kontejneru (např. zarovnat prvky nalevo od středu – tedy doprava na levé polovině stránky; nechat element vyplnit nadřazený kontejner, apod.), můžete k tomu použít relativní pozici kontejneru:

.container {
    position: relative; 
}
.absoluteChild { 
    position: absolute; right: 0; 
}
.fillChild {
    width: 90%; height: 100%; margin: 0 auto;
}

Po použití zde uvedených CSS stylů dojde k tomu, že absoluteChild bude zarovnáno na pravou stranu kontejneru container, zatímco fillChild bude vyplňovat kontejner na výšku a zabírat 90% jeho šířky (přičemž bude zarovnáno na střed). Oba prvky se budou samozřejmě překrývat díky tomu, že absoluteChild je absolutně pozicované.