Свойство vertical-align - это мощный инструмент, который позволяет точно контролировать вертикальное позиционирование элементов. Оно отвечает за то, как контент выстраивается по вертикали внутри своего контейнера, что особенно важно для создания аккуратной и профессиональной вёрстки. | Значение по умолчанию: | baseline | | Наследуется: | нет | | Версия: | CSS1 | | Синтаксис JavaScript: | object.style.verticalAlign="bottom" | | Значение | Описание | | величина | Позволяет приподнять или опустить элемент на конкретное расстояние. Обратите внимание: здесь допустимы и отрицательные значения, что открывает интересные возможности для дизайна. | | % | Смещает элемент вверх или вниз на заданный процент от общей высоты строки. Как и в случае с абсолютными величинами, можно использовать отрицательные значения для точной корректировки. | | baseline | Стандартный вариант: элемент выравнивается по базовой линии текста родительского элемента. Это самое естественное и частое состояние. | | sub | Элемент опускается, имитируя положение нижнего индекса (строчной буквы). | | super | Элемент поднимается вверх, как верхний индекс. Отличный способ выделить важные детали. | | top | Выравнивание по самой верхней точке на текущей строке, независимо от высоты других элементов. | | text-top | Верхняя граница элемента совмещается с верхней частью текста родительского блока. Очень удобно для иконок или изображений в строках текста. | | middle | Классика жанра: элемент центрируется по вертикали относительно родителя. Частый выбор для таблиц и форм. | | bottom | Нижний край элемента совпадает с нижним краем родительского блока. Создает ощущение «заземленности». | | text-bottom | Нижняя граница элемента привязывается к нижней части текста родителя. Полезно, когда нужно опустить элемент ниже основного потока текста. | | inherit | Элемент автоматически заимствует значение вертикального выравнивания от своего родителя. Упрощает код при массовой настройке. | Пример
|