Выравнивание элементов. HTML выравнивание по центру Html таблица вертикальное выравнивание

Влад Мержевич

За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align="center" тега , а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.

Использование ширины и высоты на всю доступную область веб-страницы гарантирует, что содержимое таблицы будет выравниваться строго по центру окна браузера, независимо от его размеров.

Выравнивание по горизонтали

За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега , допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю

Для указания выравнивания содержимого ячеек по верхнему краю, для тега требуется установить атрибут valign со значением top (пример 2).

Пример 2. Использование valign

В данном примере характеристики ячеек управляются с помощью параметров тега , но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3).

Пример 3. Применение стилей для выравнивания

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom .

Выравнивание по центру

По умолчанию содержимое ячейки выравнивается по центру их вертикали, поэтому в случае разной высоты колонок требуется задавать выравнивание по верхнему краю. Иногда все-таки нужно оставить исходный способ выравнивания, например, при размещении формул, как показано на рис. 2.

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы

(18.6)

В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.

Выравнивание элементов формы

С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align="right" . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .

Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.

Синтаксис CSS vertical-align

... vertical-align : value ; ...

• baseline - выравнивание по базовой линии предка (или просто нижняя граница родителя)
• bottom - выравнивание по нижней части строки (или элемента, который располагается ниже всех)
• middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
• sub - отображение происходит под строкой (выглядит как подстрочный индекс)
• super - отображение происходит над строкой (как верхний индекс)
• text-bottom - выравнивание нижней границы элемента по нижнему краю строки
• text-top - выравнивание верхняя границы элемента по верхнему краю строки
• top - выравнивание верхняя края элемента по верху самого высокого элемента строки
• inherit - наследует значение родителя
• значение - указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
• проценты - указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз

Значение vertical-align по умолчанию:

• baseline (для строчных элементов)
• middle (для ячеек таблицы)

Вертикальное выравнивание в таблицах

Чаще всего vertical-align используется в ячейках таблиц. В теге

Синтаксис CSS valign для таблиц

Где value может принимать следующие значения:

• baseline - выравнивание по базовой линии первой текстовой строки
• bottom - выравнивание по нижнему краю ячейки таблицы
• middle - выравнивание по середине ячейки
• top - выравнивание верхнему краю ячейки

Например:

Примеры с вертикальными выравниваниями

Пример 1. Значения vertical-align: baseline, bottom, top, sub

Текст с выравниванием vert_align_baseline
Текст с выравниванием vert_align_bottom
Текст с выравниванием vert_align_top
Текст с выравниванием vert_align_sub

Пример 2. Значения vertical-align: абсолютные значения и проценты

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

Преобразуется на странице в следующее:

Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз

Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).

Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

object.style.verticalAlign ="VALUE "

Задача

Выровнять содержимое ячеек таблицы по их верхнему краю.

Решение

По умолчанию содержимое ячеек выравнивается по центру вертикали, что не всегда удобно, особенно если содержимое близлежащих ячеек различается по объему. При этом получится, что в одной ячейке текст начинается от верхнего края, а в другой по середине. Исправить это положение можно с помощью стилевого свойства vertical-align со значением top , добавляя его к селектору td , как показано в примере 1.

Пример 1. Применение vertical-align

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере все параметры таблицы и ячеек задаются через стили. Результат примера показан на рис. 1.

Поговорим о том, как выровнять текст в таблице HTML в горизонтальном и в вертикальном направлениях.

Для того, чтобы выровнять по горизонтали следует использовать CSS-свойство text-align . Ему присущи такие значения, как left , center и right .

Чтобы выровнять по вертикали необходимо применять CSS-свойство vertical-align . Ему, в свою очередь, характерны такие значения, как top , middle и bottom .

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

На практике выравнивание содержимого ячеек выглядит вот так:

Td { ... vertical-align: bottom; text-align: right; }

Результат в браузере для таблицы, которую мы создали в прошлом уроке:

Таким образом весь текст в ячейках прижался к правому нижнему углу.

Как выровнять текст в ячейке таблицы HTML

Если Вас интересует как выровнять текст в ячейке таблицы и эта ячейка конкретная, нужно задать свойство только для этой ячейки. Например, с помощью атрибута class . В таблице присваиваете ячейке класс:

... ...

А затем задаёте свойства для этого класса:

SpecialTd { ... vertical-align: bottom; text-align: right; }

Содержимое ячеек может быть выровнено по левому краю, по правому краю или по центру. На новом рабочем листе все ячейки имеют формат Обычный , в котором числа, даты и время выравниваются по правому краю ячейки, текст – по левому, а логические значения ИСТИНА и ЛОЖЬ – центрируются. Изменение выравнивания не влияет на тип данных. Для выравнивания содержимого ячеек необходимо:

выделить ячейки, которые следует отформатировать;

в менюФормат выбрать команду Ячейки ;

выбрать вкладыш Выравнивание (рис.22);

в поле списка по горизонтали выбирается тип выравнивания по горизонтали:

по значению – выравнивание по умолчанию в зависимости от типа данных;

по левому краю (отступ) – содержимое ячейки выравнивается по левому краю с отступом, указанным в поле справа;

по центру – содержимое ячейки центрируется;

по правому краю – содержимое ячейки выравнивается по правому краю;

с заполнением – содержимое выделенного диапазона заполняется символами, указанными в левой ячейке выбранного диапазона;

по ширине – содержимое ячейки разбивается на несколько строк, а пробелы между словами устанавливаются так, чтобы ширина строк соответствовала ширине ячейки;

по центру выделения – содержимое левой ячейки выделенного диапазона выравнивается по центру диапазона (все другие ячейки выделенного диапазона должны быть пустыми);

в поле списка по вертикали выбирается тип выравнивания по вертикали:

по верхнему краю – содержимое ячейки выравнивается по верхнему краю;

по центру – по центру;

по нижнему краю – по нижнему краю;

по высоте – содержимое ячейки разбивается на несколько строк, первая и последняя строки выравниваются по верхней и нижней границе ячейки;

в группе флажков Отображение можно включить следующие режимы:

переносить по словам – по достижению правой границы ячейки текст будет переноситься на новую строку;

автоподбор ширины – размер символов уменьшается так, что содержимое ячейки помещается в границах ячейки;

объединение ячеек – выделенные ячейки объединяются в одну;

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

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

Чтобы выровнять текст по центру нескольких столбцов, необходимо:

Установление шрифта

Для установления шрифта необходимо:

выделить группу ячеек;

в меню Формат выбрать команду Ячейки ;

выбрать вкладыш Шрифт (рис.23);

в списке Шрифт выбирается тип шрифта;

в поле Начертание выбирается начертание шрифта:

обычный – обычное начертание;

курсив – курсивное начертание ;

полужирный – жирное начертание ;

полужирный курсив – жирное курсивное начертание .

в поле Размер – размер шрифта в пунктах (1 пункт = 0,375мм).

в поле Подчеркивание – тип линии подчеркивания:

Нет – подчеркивание не используется;

Одинарное, по значению – подчеркивание символов одинарной линией;

Двойное, по значению – подчеркивание символов двойной линией;

Одинарное, по ячейке – подчеркивание одинарной линией по ширине ячейки;

Двойное, по ячейке – подчеркивание двойной линией по ширине ячейки;

в поле Цвет – цвет символов;

в рамке Эффекты можно установить флажки:

зачеркнутый – зачеркивание текста одинарной линией;

верхний индекс – размер символов уменьшается, текст располагается выше;

нижний индекс – размер символов уменьшается, текст располагается ниже;

если установить флажок Обычный , то в ячейке установится шрифт по умолчанию;

щелкнутьОК .

Для быстрого форматирования символов используется панель инструментов Форматирование .