Plokk-elementide joondamine CSS-is

Omadust margin kasutatakse mitte ainult tühikute määramiseks, vaid ka plokk-elementide keskele joondamiseks. Selleks tuleb parem ja vasak tühik määrata väärtusele auto.

Allolevas näites satub sisemine plokk keskele:

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

Pidage meeles, et sel viisil saab keskele joondada ainult plokk-elemente, ainult horisontaalselt ja ainult siis, kui neile on määratud laius.

Kui me vajame erinevat ülemist ja alumist tühikut margin, siis võib kirjutada nii:

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

Võib ümber kirjutada ka kolme väärtusega: esimene määrab ülemise tühiku, kolmas - alumise, ja teine määrab väärtuse auto parema ja vasaku tühiku jaoks:

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

Korrake lehte näidise järgi, tehes nii, et rohelised plokid asuksid oma vanema keskel: