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

Строчно-блочные элементы выравниваются так же, как и строчные - с помощью `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; }`

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

Модифицируйте предыдущую задачу так, чтобы текст внутри ссылки выл выровнен по центру этой ссылки.

←→
↑