Выравнивание

Совершенно непонятно почему, но выравнивание содержимого в ячейках описано намного лучше, чем высоты ячеек и строк. Это справедливо даже для вертикального выравнивания, которое может влиять на высоту строки. Самым простым является горизонтальное выравнивание. Для выравнивания содержимого ячейки предназначено свойство text-align. В сущности, ячейка рассматривается как блочный элемент, и все ее содержимое выравнивается в соответствии со значением text-align.

Чтобы выровнять содержимое ячейки таблицы по вертикали, применяется свойство vertica-align. Многие его значения аналогичны тем, которые управляют вертикальным выравниванием строкового содержимого, но смысл этих значений в случае применения к ячейке таблицы меняется. Приведем три простейших случая:

top
Верх содержимого ячейки выравнивается по верху строки; а в случае объединенных ячеек верх содержимого ячейки выравнивается по верху первой из охватываемых ею строк.

bottom
Низ содержимого ячейки выравнивается по низу строки; в случае объединенных ячеек низ содержимого ячейки выравнивается по низу последней из охватываемых ею строк.

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

Применяются следующие стили и разметка:

table {table-layout: auto; width: 20em;
border-collapse: separate; border-spacing: 3px;}
td {border: 1px solid; background: silver;
padding: 0;}
div {border: 1px dashed gray; background: white;}
#r1c1 {vertical-align: top; height: 10em;}
#r1c2 {vertical-align: middle;}
#r1c3 {vertical-align: bottom;}



The contents of this cell are top-aligned.


The contents of this cell are middle-aligned.


The contents of this cell are bottom-aligned.



В каждом из случаев выравнивание осуществляется за счет автоматического увеличения отступов самой ячейки для достижения необходимого эффекта.


В первой ячейке нижний отступ ячейки был изменен, чтобы уравнять разницу между высотой блока ячейки и высотой ее содержимого. Для второй ячейки отступы сверху и снизу были уравнены, чтобы обеспечить вертикальное центрирование содержимого ячейки. В последней ячейке был изменен верхний отступ. Четвертое возможное значение выравнивания – baseline, и оно немного сложнее первых трех:

baseline
Базовая линия ячейки выравнивается по базовой линии строки; в случае объединенных ячеек базовая линия ячейки выравнивается по базовой линии первой охватываемой ею строки. Проще представить иллюстрацию, а затем обсудить, что происходит.

Базовая линия строки определяется расположенной ниже всех в строке первой базовой линией ячейки (т. е. базовой линией первой строки текста). Таким образом базовая линия строки была определена третьей ячейкой, у которой первая базовая линия расположена ниже всех. Тогда базовая линия первой строки текста двух первых ячеек будет выровнена по базовой линии строки. Как и для выравнивания верха, середины и низа, выровненное по базовой линии содержимое ячейки размещается за счет изменения верхнего и нижнего отступов ячеек. Если ни одна из ячеек строки не выравнивается по базовой линии, строка даже не имеет базовой линии, она ей просто не нужна.

Детализируем процесс выравнивания содержимого ячеек строки:
1.


Если какая-либо ячейка строки выравнивается по базовой линии, сначала определяется базовая линия строки, а затем происходит размещение содержимого выровненных по базовой линии ячеек.
2. Размещается содержимое всех ячеек, выровненных по верху. Теперь строка имеет предварительную высоту, которая определяется низом той ячейки, которая расположена ниже всех ячеек, содержимое которых уже размещено.
3. Если среди оставшихся ячеек есть выровненные по середине или по низу и высота содержимого больше, чем предварительная высота строки, высота строки увеличивается, чтобы вместить самую высокую из этих ячеек.
4. Размещается содержимое во всех оставшихся ячейках. Для любой ячейки, содержимое которой ниже высоты строки, отступы увеличиваются, чтобы привести ее высоту в соответствие высоте строки. Значения sub, super, text-top и text-bottom свойства vertical-align в применении к ячейкам таблицы игнорируются. Таким образом, применение следующего правила имело бы эффект:

th {vertical-align: text-top;}.



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическая компоновка
Анонимные объекты таблицы
Визуальная организация таблицы
Высота
Значения свойства display для таблиц

Вернуться в раздел: CSS / 11. Верстка таблиц