Poravnava bločnih elementov v CSS

Lastnost margin se ne uporablja le za nastavitev robov, temveč tudi za centriranje bločnih elementov. Za to je treba desni in levi rob nastaviti na vrednost auto.

V spodnjem primeru bo notranji blok postavljen na sredino:

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

Upoštevajte, da je na ta način mogoče centrirati samo bločne elemente, samo vodoravno in samo, če imajo določeno širino.

Če potrebujemo različne zgornje in spodnje robove margin, lahko napišemo takole:

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

Lahko prepišemo tudi s tremi vrednostmi: prva nastavi zgornji rob, tretja - spodnji, druga pa nastavi vrednost auto za desni in levi rob:

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

Ponovite stran po vzorcu tako, da bodo zeleni bloki nameščeni na sredini svojega starša: