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

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

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

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

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