Выравнивание строчных элементов

В предыдущем уроке мы с вами научились выравнивать блочные элементы. Описанный способ работает только для блочных элементов. Строчные элементы выравниваются по-другому - просто родителю следует задать свойство 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.