Justering av blokkelementer i CSS

Egenskapen margin brukes ikke bare for å sette avstander, men også for å sentrere blokkelementer. For å gjøre dette bør høyre og venstre avstand settes til verdien auto.

I eksempelet under vil den indre blokken bli sentrert:

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

Vær oppmerksom på at du på denne måten kan sentrere bare blokkelementer, bare horisontalt og bare hvis de har en angitt bredde.

Hvis vi trenger forskjellig øvre og nedre avstand margin, kan vi skrive slik:

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

Det kan også omskrives med tre verdier: den første vil sette øvre avstand, den tredje - nedre, og den andre vil sette verdien auto for høyre og venstre avstand:

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

Gjenskap siden etter mønsteret, og gjør slik at de grønne blokkene plasseres i midten av sin forelder: