Uratibu Vipengele vya Block katika CSS

Sifa margin haitumiki tu kwa kuweka vikwazo, bali pia kwa kuweka katikati vipengele vya block. Ili kufanya hivyo, kiwango cha kulia na kushoto kinapaswa kuwekwa kwa thamani auto.

Katika mfano ufuatao, kizuizi cha ndani kitakuwa katikati:

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

Kumbuka kuwa kwa njia hii unaweza kuweka katikati vipengele vya block tu, kwa usawa tu na tu, ikiwa upana umewekwa.

Ikiwa tunahitaji kiwango tofauti cha juu na chini margin, basi tunaweza kuandika hivi:

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

Inaweza kuandikwa tena kupitia maadili matatu: ya kwanza itaweka kiwango cha juu, ya tatu - ya chini, na ya pili itaweka thamani auto kwa upande wa kulia na kiwango cha kushoto:

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

Rudisha ukurasa kulingana na kiolezo, ukifanya hivyo ili vizuizi vya kijani viwe katikati kwa mzazi wake: