Свойство vertical-align

Свойство vertical-align определяет вертикальное выравнивание элемента (в том числе и изображения) относительно родительского блока. Это свойство, помимо значения inherit, может иметь одно из значений, приведенных в табл. 4.3.110.

Таблица 4.3.11. Допустимые значения свойства vertical-align

Значение свойства vertical-align	Что задает	Пример
top	Выравнивание блока сверху относительно его родительского блока.
middle	Выравнивание блока посередине относительно его родительского блока.
bottom	Выравнивание блока снизу относительно его родительского блока.
baseline	Выравнивание базовой линии блока относительно базовой линии его родительского блока (значение по умолчанию).
text-top	Выравнивание верхней границы блока относительно верхней кромки шрифта родительского элемента.
text-bottom	Выравнивание нижней границы блока относительно нижней кромки шрифта родительского элемента.
sub	Смещение базовой линии блока вниз до уровня, отведенного для нижних индексов.
super	Смещение базовой линии блока вверх до уровня, отведенного для верхних индексов.
число	Смещение блока на заданную величину вверх (положительное число) или вниз (отрицательное число).
процент	Смещение блока на заданный процент вверх (положительное значение) или вниз (отрицательное значение).

Пример 4.3.63. Задание вертикального выравнивания элементов:

1. Для последовательности элементов HTML:

<p>Начало абзаца

<img src="BackgroundComputer.png"

style="vertical-align: text-top"/>

Окончание абзаца.</p>

выводимый фрагмент Web-страницы будет иметь следующий вид:

2. Для последовательности элементов HTML:

span.lindex {font-size:10pt; vertical-align:sub}

.italic {font-style:italic}

…

<p>Если <span class="italic">x

<span class="lindex">i</span></span> =

<span class="italic">x</span><span class="lindex">0</span>,

цикл завершается.</p>

выводимый фрагмент Web-страницы будет иметь следующий вид: