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

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

←→
↑