CSS da Blok Elementlarni Markazga Joylash

margin xususiyati nafaqat chek oralig'ini belgilash uchun, balki blok elementlarni markazga joylash uchun ham qo‘llaniladi. Buning uchun o‘ng va chap chek oralig‘i auto qiymatiga o‘rnatilishi kerak.

Quyidagi misolda ichki blok markazga joylanadi:

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

Yodda tutingki, shu usulda faqat blok elementlarni, faqat gorizontal yo‘nalishda va faqat ularga kenglik belgilangan taqdirdagina markazga joylash mumkin.

Agar bizga margin ning yuqori va pastki qismi uchun turli chek oralig‘i kerak bo‘lsa, quyidagicha yozish mumkin:

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

Buni uchta qiymat orqali ham qayta yozish mumkin: birinchi qiymat yuqori chek oralig‘ini, uchinchisi pastki chek oralig‘ini, ikkinchisi esa o‘ng va chap chek oralig‘i uchun auto qiymatini belgilaydi:

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

Namunaga qarab sahifani takrorlang va yashil bloklarni o‘z ota-elementi markaziga joylashtiring: