Bloka elementu izlīdzināšana CSS

Īpašība margin tiek lietota ne tikai atstarpju noteikšanai, bet arī bloka elementu centrēšanai. Lai to izdarītu, labajai un kreisajai atstarpsei jābūt iestatītai uz vērtību auto.

Zemāk redzamajā piemērā iekšējais bloks tiks novietots centrā:

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

Ņemiet vērā, ka šādā veidā var centrēt tikai bloka elementus, tikai horizontāli un tikai tad, ja tiem ir norādīts platums.

Ja mums vajag atšķirīgas augšējās un apakšējās atstaples margin, tad var uzrakstīt šādi:

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

Var pārrakstīt arī ar trim vērtībām: pirmā noteiks augšējo atstarpi, trešā - apakšējo, bet otrā iestatīs vērtību auto labajai un kreisajai atstarpēm:

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

Atkārtojiet lapu pēc parauga, izdarot tā, lai zaļie bloki atrastos centrā sava vecāka elementa: