Описание примера расчета высоты табличного ряда и вертикального выравнивания ячейки

Эта диаграмма показывает, как свойство 'vertical-align' для ячеек комбинируется во время установки высоты ряда, содержащего ячейки. Диаграмма также иллюстрирует некоторые значения 'vertical-align', которые применяются к ячейкам таблицы: базовая линия, верх, низ и середина.

Диаграмма показывает ряд из пяти табличных ячейки с различными высотами и выравниваниями. Справа от рядов метки указывают положение верха, базовой линии, середины и низа ряда.

Первая ячейка выравнивается по базовой линии ряда и продолжается даже ниже верха ряда. Вторая ячейка тоже выравнивается по базовой линии ряда и продолжается до места, чуть выше низа ряда. Треть ячейка выравнивается по верху ряда и продолжается до места, чуть выше низа ряда. Четвертая ячейка выравнивается по низу ряда и продолжается до места, чуть выше середины ряда. Пятая ячейка выравнивается по середине ряда и не касается ни верха, ни низа ряда. Красная горизонтальная линия внутри каждой ячейки показывает, как она выравнивается по вертикали в блоке ряда.