Спецификация CSS2

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


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

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

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

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

Четвёртая ячейка выровнена по низу ряда и растянута до середины ряда.

Пятая ячейка выровнена по середине ряда и не достигает ни верха, ни низа ряда.

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



Содержание раздела