Zarovnanie blokových elementov v CSS

Vlastnosť margin sa nepoužíva len na nastavenie odsadenia, ale aj na centrovanie blokových elementov. Na to treba nastaviť pravé a ľavé odsadenie na hodnotu auto.

V príklade nižšie sa vnútorný blok vycentruje:

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	border: 1px solid red;
}

.child {
	height: 100px;
	width: 200px;
	border: 1px solid green;
	margin: 10px auto;
}

Majte na pamäti, že takto je možné centrovanie len blokových elementov, len horizontálne a len v prípade, že majú nastavenú šírku.

Ak potrebujeme rôzne horné a dolné odsadenie margin, môžeme napísať takto:

.child {
	margin: 30px auto 10px auto;
}

Je možné to prepísať aj cez tri hodnoty: prvá nastaví horné odsadenie, tretia - dolné, a druhá nastaví hodnotu auto pre pravé a ľavé odsadenie:

.child {
	margin: 30px auto 10px;
}

Zopakujte stránku podľa vzoru tak, aby sa zelené bloky umiestnili do stredu svojho rodiča: