Lohkoelementtien tasaus CSS:ssä

Ominaisuutta margin käytetään ei vain marginaalien asettamiseen, vaan myös lohkoelementtien keskittämiseen. Tätä varten oikean ja vasemman marginaalin tulee olla asetettu arvoon auto.

Alla olevassa esimerkissä sisäinen lohko asettuu keskelle:

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

Pidä mielessä, että tällä tavalla voit keskittää vain lohkoelementtejä, vain vaakatasossa ja vain, jos niille on asetettu leveys.

Jos tarvitsemme erilaiset ylä- ja alamarginaalit margin, voimme kirjoittaa näin:

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

Voit kirjoittaa sen uudelleen kolmella arvolla: ensimmäinen asettaa ylämarginaalin, kolmas - alamarginaalin, ja toinen asettaa arvon auto oikealle ja vasemmalle marginaalille:

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

Toista sivu mallin mukaisesti siten, että vihreät lohkot sijaitsevat keskellä niiden parent-elementtiä: