Полное изложение примера вычисления высоты рядов таблицы и вертикального выравнивания ячеек

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

На диаграмме показан ряд из пяти (с лэйблами) ячеек таблицы разной высоты и выравнивания. Справа от ряда лэйблы обозначают качество горизонтальной позиции ряда: top, baseline, middle и bottom (от top до bottom).

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

Вернуться к изображению.