Zarovnání blokových prvků v CSS

Vlastnost margin se nepoužívá pouze pro nastavení odsazení, ale také pro centrování blokových prvků. K tomu je třeba nastavit pravý a levý odsazení na hodnotu auto.

V následujícím příkladu se vnitřní blok umístí na střed:

<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;
}

Mějte na paměti, že tímto způsobem lze centrovat pouze blokové prvky, pouze vodorovně a pouze pokud mají nastavenou šířku.

Pokud potřebujeme různé horní a dolní odsazení margin, lze to napsat takto:

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

Lze to také přepsat pomocí tří hodnot: první nastaví horní odsazení, třetí - dolní odsazení a druhá nastaví hodnotu auto pro pravý a levý odsazení:

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

Podle vzoru opakujte stránku tak, aby se zelené bloky umístily na střed svého rodiče: