Justering af blokelementer i CSS

Egenskaben margin bruges ikke kun til at indstille margener, men også til at centrere blokelementer. For at gøre dette skal højre og venstre margin indstilles til værdien auto.

I eksemplet nedenfor vil den indre blok blive centreret:

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

Husk, at du på denne måde kun kan centrere blokelementer, kun vandret og kun hvis de har en angivet bredde.

Hvis vi har brug for forskellig top- og bundmargin margin, kan vi skrive sådan her:

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

Det kan også omskrives med tre værdier: den første indstiller topmargenen, den tredje - bundmargenen, og den anden indstiller værdien auto for højre og venstre margener:

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

Genskiv siden efter forbilledet, sådan at de grønne blokke placeres i midten af deres forælder: