Blokk elemek igazítása CSS-ben

A margin tulajdonságot nem csak margók beállítására használják, hanem blokk elemek középre igazítására is. Ehhez a jobb és bal margót auto értékre kell állítani.

Az alábbi példában a belső blokk középre kerül:

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

Fontos tudni, hogy így csak blokk elemeket, csak vízszintesen és csak akkor lehet középre igazítani, ha meg van adva a szélességük.

Ha különböző felső és alsó margóra van szükségünk a margin tulajdonságnál, akkor írhatjuk így:

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

Átírható három értékkel is: az első beállítja a felső margót, a harmadik az alsót, míg a második a auto értéket adja a jobb és bal margóknak:

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

Ismételje meg az oldalt a minta alapján úgy, hogy a zöld blokkok a szülőjük közepén helyezkedjenek el: