Вертикальное выравнивание

При изменении вертикального выравнивания строковых блоков применяются такие же принципы определения высоты. Предположим, для элемента strong задано вертикальное выравнивание в 4px:

This is text, some of which is emphasized, plus other text

that is strongly
emphasized
and that is

larger than the surrounding text.



Это маленькое изменение поднимает элемент на четыре пиксела, что повышает и его область содержимого, и его строковый блок. Поскольку строковый блок элемента strong уже был самым высоким в строке, это изменение вертикального выравнивания переносит верх контейнера строки еще на четыре пиксела вверх. Рассмотрим другую ситуацию. Здесь в одной строке с текстом strong мы имеем другой строковый элемент, и он выровнен не по базовой линии:

this is text, some of which is emphasized, plus other text

that is strong
and tall and that is

larger than the surrounding text.



Получаем такой же результат, как и в предыдущем примере, в котором средний контейнер строки выше, чем остальные.


В этом случае верх строкового блока выровнен по верхней границе контейнера строки. Поскольку значения font-size и line-height этого текста равны, высота содержимого и строкового блока одинакова. Однако взгляните сюда:

This is text, some of which is emphasized, plus other text

that is strong
and tall
and that is

larger than the surrounding text.



Поскольку значение line-height «высокого» текста меньше, чем его значение font-size, строковый блок для этого элемента меньше, чем его область содержимого. Этот факт меняет размещение самого текста,т. к. верх его строкового блока должен быть выровнен по верхней границе контейнера строки. С другой стороны, можно задать для текста значение line-height, превышающее значение font-size. Например:

This is text, some of which is emphasized, plus other text

that is strong

and tall
and that is

larger than the surrounding text.



Поскольку задано значение line-height в 18px, разница между line-height и font-size составляет 6 пикселов.


Половинный межстрочный интервал в 3 пиксела добавляется к области содержимого, и в результате получается строковый блок, высота которого равна 18 пикселам. Верх этого строкового блока выравнивается по верхней границе контейнера строки. Аналогичным образом значение свойства bottom выровняет низ строкового блока строкового элемента по нижней границе контейнера строки. В терминах данной главы результаты применения соответствующих ключевых слов задания значения свойства vertical-align такие:

top
Выравнивает верх строкового блока элемента по верхней границе содержащего его контейнера строки.

bottom
Выравнивает низ строкового блока элемента по нижней границе содержащего его контейнера строки.

text-top
Выравнивает верх строкового блока элемента по верхней границе области содержимого родителя.

text-bottom
Выравнивает низ строкового блока элемента по нижней границе области содержимого родителя.

middle
Выравнивает среднюю точку по вертикали строкового блока элемента с точкой, расположенной на половину ex выше базовой линии родителя.

super
Перемещает область содержимого и строковый блок элемента вверх.


Расстояние не определено и может меняться агентом пользователя.

sub
Аналогично super, за исключением того, что элемент перемещается
вниз, а не вверх.
<процентное_значение>
Сдвигает элемент вверх или вниз на расстояние, определяемое как объявленная в процентах часть значения свойства line-height элемента.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное форматирование