• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Главная → HTML уроки и советы → CSS → Свойство CSS vertical-align

Свойство CSS vertical-align

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


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

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

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

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

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

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

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

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



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

<td valign="value"> или <tr valign="value">

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

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

Например:

<table> <tr> <td valign="top"> Выравнивание по верху </td> </tr> <tr> <td valign="middle"> Выравнивание по середине </td> </tr> <tr> <td valign="bottom"> Выравнивание по низу </td> </tr> </table>

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

Выравнивание по верху
Выравнивание по середине
Выравнивание по низу

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

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

<html> <head> <style> .vert_align_baseline{ display: inline-block; vertical-align: baseline; background: #ccc; } .vert_align_top{ display: inline-block; vertical-align: top; background: #ccc; } .vert_align_bottom{ display: inline-block; vertical-align: bottom; background: #ccc; } .vert_align_sub{ display: inline-block; vertical-align: sub; background: #ccc; } .vert_align_text_top{ display: inline-block; vertical-align: top; background: #ccc; } </style> </head> <body> <br/><span class="vert_align_baseline">Текст с выравниванием vert_align_baseline</span> <br/><span class="vert_align_bottom">Текст с выравниванием vert_align_bottom</span> <br/><span class="vert_align_top">Текст с выравниванием vert_align_top</span> <br/><span class="vert_align_sub">Текст с выравниванием vert_align_sub</span> </body> </html>


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

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

<html> <head> <style> .vert_align_abs_plus{ display: inline-block; vertical-align: 10px; background: #aaa; } .vert_align_abs_minus{ display: inline-block; vertical-align: -5px; background: #aaa; } .vert_align_per_plus{ display: inline-block; vertical-align: 50%; background: #aaa; } .vert_align_per_minus{ display: inline-block; vertical-align: -30%; background: #aaa; } </style> </head> <body> <br/><span class="vert_align_abs_plus">Текст с выравниванием на 10 пикселей вверх</span> <br/><span class="vert_align_abs_minus">Текст с выравниванием на 5 пикселей вниз</span> <br/><span class="vert_align_per_plus">Текст с выравниванием на 50% вверх</span> <br/><span class="vert_align_per_minus">Текст с выравниванием на 30% вниз</span> </body> </html>

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

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


Примечание

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


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

object.style.verticalAlign="VALUE"


Читайте также:
• CSS border
• CSS background
• CSS transition
• Свойство display
• Свойство nth-child
• Свойство overflow
• Свойство text-indent

← Перейти в каталог CSS уроков

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2021 - Zarabotat-Na-Sajte.ru