Подравняване на блокови елементи в CSS

Свойството margin се използва не само за задаване на отстъпи, но и за центриране на блокови елементи. За това десния и левия отстъп трябва да се зададат със стойност auto.

В примера по-долу вътрешният блок ще стане в центъра:

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

Имайте предвид, че по този начин може да се центрира само блокови елементи, само хоризонтално и само, ако им е зададена ширина.

Ако са ни нужни различни горен и долен отстъп margin, то може да се напише ето така:

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

Може да се пренапише и с три стойности: първата задава горен отстъп, третата - долен, а втората задава стойност auto за десния и левия отстъпи:

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

Повторете страницата по образеца, като направите така, че зелените блокове да се разполагат в центъра на своя родител: