мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

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

Строчно-блочные элементы выравниваются так же, как и строчные - с помощью 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</div> </div> .parent { padding: 10px 0; border: 1px solid red; } .child { width: 100px; padding: 10px; border: 1px solid green; }

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

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