Blokinių elementų lygiavimas CSS

Savybė margin naudojama ne tik atstumams nustatyti, bet ir blokiniams elementams centruoti. Tam dešinįjį ir kairįjį atstumus reikia nustatyti į reikšmę auto.

Žemiau pateiktame pavyzdyje vidinis blokas atsiras centre:

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

Turėkite omenyje, kad tokiu būdu galima centruoti tik blokinius elementus, tik horizontaliai ir tik jei jiems nustatytas plotis.

Jei mums reikia skirtingų viršutinio ir apatinio atstumų margin, tai galima parašyti taip:

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

Galima perrašyti ir naudojant tris reikšmes: pirmoji nustatys viršutinį atstumą, trečioji - apatinį, o antroji nustatys reikšmę auto dešiniajam ir kairiajam atstumams:

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

Pakartokite puslapį pagal pavyzdį, padarydami taip, kad žali blokai būtų išdėstyti savo tėvinio elemento centre: