Вирівнювання блокових елементів на 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;
}

Повторіть сторінку за зразком, зробивши так, щоб зелені блоки розташовувалися по центру свого батька:

Вирівнювання

Значення auto для margin насправді може не лише центрувати. Фактично це значення дозволяє розрахувати відступ автоматично і зробити його максимально можливим. Коли ми ставимо auto для лівого та правого відступу – елемент центрується.

Проте можна поставити тільки лівий відступ. В цьому випадку елемент отримає максимально можливий відступ зліва і займе крайнє праве становище:

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	margin-left: auto; /* задаємо автоматичний лівий відступ */
	height: 100px;
	width: 200px;
	border: 1px solid green;
}

Нюанс

За потреби можна задати і правий відступ і елемент не буде притиснутий до правого кордону, а відступить від нього:

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	margin-left: auto;
	margin-right: 20px; /* задаємо правий відступ */
	height: 100px;
	width: 200px;
	border: 1px solid green;
}