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

У попередньому уроці ми з вами навчилися вирівнювати блокові елементи. Описаний спосіб працює тільки для блокових елементів. Рядкові елементи вирівнюються по-іншому - просто батькові слід задати властивість text-align у потрібному значенні.

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

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

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

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

Декілька елементів

Це без проблем працює, якщо малих елементів не один, а кілька:

<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 {
	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 {
	border: 1px solid green;
}

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

Даний деякий дів, а в ньому посилання:

<div class="parent">
	<a href="">ссылка 1</a>
	<a href="">ссылка 2</a>
	<a href="">ссылка 3</a>
</div>

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

Поставте посилання по центру цього діва.

Даний деякий дів, а в ньому посилання:

<div class="parent">
	<a href="">ссылка</a>
</div>

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

Поставте це посилання по правому краю.

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