Uitlijning van blokelementen in CSS

De eigenschap margin wordt niet alleen gebruikt voor het instellen van marges, maar ook voor het centreren van blokelementen. Hiervoor moeten de rechter- en linkermarge op de waarde auto worden gezet.

In het onderstaande voorbeeld komt het binnenste blok in het midden:

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

Houd er rekening mee dat op deze manier alleen blokelementen gecentreerd kunnen worden, alleen horizontaal en alleen als er een breedte voor is opgegeven.

Als we verschillende boven- en ondermarges nodig hebben voor margin, dan kunnen we het als volgt schrijven:

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

Het kan ook herschreven worden met drie waarden: de eerste zet de bovenmarge, de derde de ondermarge, en de tweede geeft de waarde auto voor de rechter- en linkermarge:

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

Herhaal de pagina volgens het voorbeeld, en zorg ervoor dat de groene blokken in het midden van hun ouder worden geplaatst: