Выравнивание по высоте в таблице html. Все способы вертикального выравнивания в CSS. Примеры с вертикальными выравниваниями
Свойство 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 используется в ячейках таблиц. В теге
| или | |||||||||||||||
| Выравнивание по верху |
| Выравнивание по середине |
| Выравнивание по низу |
| Выравнивание по верху |
| Выравнивание по середине |
| Выравнивание по низу |
Примеры с вертикальными выравниваниями
Пример 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 "
Поговорим о том, как выровнять текст в таблице 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; }
Задача
Выровнять содержимое ячеек таблицы по их верхнему краю.
Решение
По умолчанию содержимое ячеек выравнивается по центру вертикали, что не всегда удобно, особенно если содержимое близлежащих ячеек различается по объему. При этом получится, что в одной ячейке текст начинается от верхнего края, а в другой по середине. Исправить это положение можно с помощью стилевого свойства vertical-align со значением top , добавляя его к селектору td , как показано в примере 1.
Пример 1. Применение vertical-align
HTML5 CSS 2.1 IE Cr Op Sa Fx
| Углерод | Встречается в природе в трех видах: угля, графита и алмаза. Образует большое число соединений. Углерод является непременным компонентом любого органического вещества. |
В данном примере все параметры таблицы и ячеек задаются через стили. Результат примера показан на рис. 1.
Для задания выравнивания таблицы по центру web-страницы или по одному из ее краев предназначен параметр align тега
Содержимое таблицы |
Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание таблицы по центру
На самом деле align
не только устанавливает выравнивание,
но и заставляет контент обтекать таблицу с других сторон аналогично поведению
тега
. Но поскольку
Содержимое таблицы |
Обтекающий таблицу контент...
Результат данного примера показан на рис. 2.
Рис. 2. Выравнивание таблицы по правой стороне
В текущем примере создается таблица с фоном серого цвета и выравниванием по правой стороне. Для разработки отступов от таблицы до контента используется параметр margin со значением 10 пикселов.
Чтобы запретить обтекание таблицы при ее выравнивании по одному из краев проще
всего добавляем после таблицы тег
с заданным
стилем clear: both
. Эта команда запрещает
обтекание, как с левого, так и с правого края (пример 3).
Пример 3. Отмена обтекания таблицы
Содержимое таблицы |
контент...
Выравнивание таблицы по центру делается аналогично, через параметр align="center" тега
|
. В примере 1 показано, как выравнивать по верхнему краю ячейки за счет атрибута valign
.
Пример 1. Использование параметра valign
С помощью стилей удобнее управлять положением содержимого в ячейках. Для этого следует применить параметром vertical-align со значением top , добавляя его к селектору TD , как показано в примере 2. Пример 2. Применение стилей
В данном примере все параметры таблицы и ячеек задаются через стили. Результат примера показан на рис. 1.
Рис. 1. Таблица с выравниванием содержимого ячеек по верхнему краю
Популярное в рубрике:
© 2024 Мобильные телефоны и связь
|
