Вирівнювання рядково-блочних елементів

Рядково-блокові елементи вирівнюються так само, як і малі - за допомогою text-align у потрібному значенні, заданому для батька.

Центрування елементів

Для прикладу давайте поставимо рядково-блокові елементи по центру:

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

.parent {
	text-align: center;
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid green;
}

Вирівнювання по правому краю

Вирівняємо елемент по правому краю:

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

.parent {
	text-align: right;
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid green;
}

Практичні задачі

Дано діви всередині деякого батька:

<div class="parent">
	<div class="child">text 1</div>
	<div class="child">text 2</div>
	<div class="child">text 3</div>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	padding: 10px;
	border: 1px solid green;
}

Перетворіть діви-нащадки в рядково-блокові елементи, задайте їм горизонтальний margin в 5px, а потім відцентруйте їх по горизонталі відносно свого батька.

Дано дів всередині деякого батька:

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

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	padding: 10px;
	border: 1px solid green;
}

Перетворіть див-нащадок у рядково-блоковий елемент, потім вирівняйте його по правому краю батька.

Модифікуйте попереднє завдання так, щоб дів не притискався щільно до правого краю. Для цього батьківському елементу додайте правий padding.

Модифікуйте попереднє завдання так, щоб дів не притискався щільно до правого краю. Для цього елементу-нащадку поставте правий margin.

Дано посилання всередині деякого батька:

<div class="parent">
	<a href="" class="child">text</a>
</div>

.parent {
	padding: 10px 0;
	border: 1px solid red;
}
.child {
	width: 100px;
	padding: 10px;
	border: 1px solid green;
}

Перетворіть посилання на рядково-блоковий елемент, потім вирівняйте його по правому краю батька.

Модифікуйте попереднє завдання так, щоб текст всередині посилання був вирівняний по центру цього посилання.