CSS'te Blok Elemanları Hizalama

margin özelliği sadece boşluk vermek için değil, aynı zamanda blok elemanları ortalamak için de kullanılır. Bunun için sağ ve sol boşluk auto değerine ayarlanmalıdır.

Aşağıdaki örnekte iç blok ortalanacaktır:

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

Unutmayın, bu şekilde sadece sadece blok elemanları, sadece yatay olarak ve sadece genişlik belirtilmişse ortalanabilir.

Eğer farklı üst ve alt boşluklara margin ihtiyacımız varsa, şu şekilde yazabiliriz:

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

Üç değerle de yazılabilir: ilk değer üst boşluğu, üçüncü değer alt boşluğu belirler, ikinci değer ise sağ ve sol boşluklar için auto değerini atar:

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

Örnekteki sayfayı, yeşil blokların kendi ebeveynlerinin ortasında yer alacak şekilde oluşturun: