Процентные значения не позволяют моделировать align="middle" для изображений. Вместо этого задание процентного значения в vertical-align поднимает или опускает базовую линию элемента (или нижний край замещаемого элемента) относительно базовой линии родителского элемента на объявленную величину. (Задаваемое процентное значение вычисляется как часть line-height элемента, а не его родителя.) Если процентное значение положительное, то базовая линия элемента поднимается, а если отрицательное, то опускается. В зависимости от того, на какую величину поднимается или опускается текст, он может оказаться на соседней строке, поэтому будьте осторожны, задавая процентные значения.

sub {vertical-align: -100%;}
sup {vertical-align: 100%;}
<p>We can either <sup>soar to new heights</sup> or, instead, <sub>sink into
despair...</sub></p>

Рассмотрим процентные значения подробнее. Предположим следующее:

<div style="font-size: 14px; line-height: 18px;">
Я чувствовал, что, по крайней мере, заслужил <span style="vertical-align:
50%;">повышения</span> за мои труды.
</div>

Базовая линия элемента span, значение vertical-align которого равно 50%, поднимается на девять пикселов, что составляет половину унаследованного элементом значения line-height: 18px, а не семь пикселов.

Добавлено: 17 Июля 2018 22:18:01 Добавил: Андрей Ковальчук Нравится 0

Добавить