Свойство vertical-align — вертикальное выравнивание

В отличие от свойства text-align данное свойство применяется только к строчным элементам или ячейкам таблиц. Однако на строчные элементы и ячейки таблиц оно действует по-разному³.

Вертикальное выравнивание для строчных элементов

Для строчных областей существуют несколько значений свойства vertical-align:

• baseline — значение по умолчанию. Базовая линия шрифта – это линия, совпадающая с нижней линией буквы «Ш». Незамещаемые элементы в этом случае выравниваются таким образом, чтобы базовая линия шрифтов соседних элементов совпадала. Замещаемые элементы, например, изображения, выравниваются таким образом, чтобы нижний край замещаемого элемента совпадал с базовой линией соседних элементов.

• middle — область центрируется относительно средней линии текущей строки. Средняя линия проходит на уровне половины высоты строчных букв.

• sub — область располагается на уровне нижнего индекса, верхний край совпадает со средней линией строки.

• super — область располагается на уровне верхнего индекса, нижний край совпадает со средней линией строки.

• top — верхний край области совпадает с верхним краем текущей строки.

• bottom — нижний край области совпадает с нижним краем текущей строки.

• text-top — верхний край области совпадает с верхним краем кегельных площадок соседней безымянной строчной области;

• text-bottom — нижний край области совпадает с нижним краем кегельных площадок соседней безымянной строчной области.

• Значения в процентах рассчитываются относительно высоты строки. Положительные значения смещают область вверх, отрицательные – вниз.

• Значения в единицах длины. Положительные смещают область вверх, отрицательные — вниз.

Вертикальное выравнивание для ячеек таблиц

Для ячеек таблиц выравнивание производится относительно границ ячейки. Такое выравнивание аналогично горизонтальному выравниванию.

Свойство vertical-align для ячеек таблиц может принимать всего четыре значения.

• middle — выравнивание по центру. Применяется по умолчанию.

• top — выравнивание по верхнему краю.

• bottom — выравнивание по нижнему краю.

• baseline — содержание ячеек смещается так, чтобы первые строки текста в соседних ячейках выравнивались по общей базовой линии.

Область элемента

Каждый отображаемый элемент документа создает специальную область — контейнер, в котором он отображается. Эта область состоит из нескольких полей. Для упрощения понимания типовая область элемента приведена на рисунке 4.1. Область элемента разделена на 4 подобласти.

• Область содержания — внутренняя область, в которой отображается либо содержимое, либо замещающий объект. Размерами этого поля управляют свойства height и width.

• Область внутреннего отступа задается при помощи свойств группы padding. Эта область окрашивается в цвет фона.

• Область рамки задается при помощи свойств группы border. Эта область также окрашивается в цвет фона, если она прозрачна.

• Область внешнего отступа задается свойствами группы margin. Она всегда прозрачна, то есть не заливается фоном для элемента.

Рисунок 4.4.1. Поля области элемента