Как выровнять элементы inline-block по верхней границе контейнера
Многие разработчики сталкиваются с проблемой выравнивания элементов inline-block. Проблема в том, что когда высота нескольких div отличается, div с наименьшей высотой не выравнивается по верхней границе контейнера. Мы покажем решение этой проблемы с помощью CSS свойств.
1. Создайте HTML
- Создайте <div> с классом «container».
- Создайте два других span внутри «container». Первый div имеет название «small-box», а второй называется «big-box».
2. Создайте CSS
- Задайте height и width для классов.
- Добавьте color, width и style к border.
- Задайте background для блоков и установите display в значение inline-block, которое отображает элемент в виде блока с внутренней стороны, а с внешней стороны он отображается как строчный элемент.
Пример
Нашей проблемой является выравнивание .small-box по верхней границе контейнера.
Ключевое слово «top» свойства vertical-align поможет нам в этом вопросе.
Свойство vertical-align указывает вертикальное выравнивание строчного элемента. Значение «top» выравнивает верхний край элемента с верхней линией блока.
Необходимо применить его к .small-box только для того, чтобы он начинался сверху контейнера:
Теперь наша проблема решена с помощью использования только одного CSS свойства. Давайте посмотрим код полностью.
Пример
Рассмотрим пример, где высота одного из элементов div больше, чем высота остальных элементов <li>.
Пример, где произошла ошибка:
Пример
Нам просто необходимо заменить свойство display на свойство float со значением «left». Мы используем свойство float , которое в большинстве случаев используется вместе со свойством clear. Оно указывает, с каких сторон могут находиться плавающие элементы. В этом примере мы установили clear в «both». Это означает, что плавающие элементы запрещены с правой и левой стороны.
Пример
В следующем примере можно увидеть выравнивание элементов уровня inline-block, используя ключевое слово «flex» свойства display, которое используется с расширением -Webkit-.
vertical — align
Свойство vertical — align выравнивает текстовые элементы по вертикали относительно друг друга.
�� Для простого текста это не особо актуально, то вот для строчно-блочных ( inline — block ) элементов это свойство может быть очень полезным.
Пример
Скопировать ссылку на секцию «Пример» Скопировано
Пусть у нас на странице есть три строчно-блочных элемента. Для объяснения работы свойства vertical — align они будут разной высоты:
Все три блока по умолчанию выровнялись по нижней границе. Это стандартное поведение. Изменим его и выровняем элементы по верхней границе:
Как понять
Скопировать ссылку на секцию «Как понять» Скопировано
С английского языка словосочетание vertical align дословно переводится как вертикальное выравнивание. Что в точности совпадает с ожидаемым результатом от использования этого свойства.
Как пишется
Скопировать ссылку на секцию «Как пишется» Скопировано
Значение свойства vertical — align чаще всего задаётся при помощи ключевого слова. Единовременно можно указать лишь одно значение.
Рассмотрим доступные значения на примере с котиком ��:
- baseline — значение по умолчанию. Выравниваемый элемент выстраивается по нижней линии текста. Если в родительском элементе нет текста, то элемент выравнивается по нижней границе.
- top — верхняя граница элемента находится на уровне верхней границы строки.
- middle — мысленно проведи две вертикальные линии: одну через центр текста, а вторую через центр котика. Текущее значение свойства сопоставляет эти линии. Таким образом элемент выравнивается по центру.
- bottom — выравнивает нижнюю границу элемента по уровню нижней границы строки.
- sub — удобное значение, если нужно создать нижний индекс. Например, в химических формулах: H₂O. Опускает базовую линию так, чтобы элемент опустился до уровня нижнего индекса:
- super — работает почти как sub , только поднимает базовую линию вверх.
text — bottom — выравнивает элемент по нижней точке текста с учётом выносных элементов.
text — top — верхняя часть элемента выравнивается по верхнему краю родителя:
Помимо ключевых слов можно использовать числовые значения.
Если указать значение в любых доступных единицах измерения, то положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательно — вниз.
Если указать числовое значение в процентах, то за 0% берётся нижняя граница текста без выносных элементов. То есть аналогично baseline . Процент рассчитывается от line — height родительского элемента.
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
�� Свойство vertical — align применяется к элементам, которые нужно выровнять, а не к родительскому элементу.
�� На всякий случай: вертикально — это сверху вниз. Слева направо — это горизонтально ��
�� Свойство очень пригождается когда нужно выровнять картинку или emoji относительно текста.
На практике
Скопировать ссылку на секцию «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку на секцию «Алёна Батицкая советует» Скопировано
�� Свойство vertical — align каверзное. Многие начинающие разработчики пытаются применить его к родительскому элементу, по аналогии с text — align . И ничего не выходит. Просто запомни, что его нужно применять к тому элементу, который хочется выровнять.
�� С появлением флексбоксов выравнивание по вертикали производится при помощи align — items . Поэтому на свойство vertical — align стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах.
Что такое vertical-align?
В CSS есть свойство vertical-align. Когда вы только узнаете о нем, то оно покажется довольно запутанным. Поэтому предлагаю вам пройтись вместе по правильному его использованию. Базовое применение такое:
Обратите внимание, что в примере правило применяется к элементу img. Изображения являются инлайновыми элементами и находятся в одной строке с текстом, если это возможно. Но что значит “находятся в строке”? В этом месте и появляется vertical-align.
Допустимые значения: baseline (базовая линия), sub (нижний индекс), super (верхний индекс), top (верх), text-top (верх текста), middle (середина), bottom (низ), text-bottom (низ текста), точное значение или значение в процентах.
Путаница, по моему мнению, возникает когда вы пытаетесь применить вертикальное выравнивание к блоку с вложенными элементами и не видите никакого результата.
Если у вас есть небольшой блок, вложенный в блок побольше и вы хотите выровнять его по центру вертикально, то у вас ничего не выйдет.
Baseline
Значение по умолчанию у vertical-align (если вы не написали иного) — baseline. Изображение будет выстраиваться вместе с текстом по его базовой линии. Обратите внимание, что подстрочные элементы находятся ниже базовой линии, поэтому изображение не выстраивается по их уровню.
Middle
Пожалуй, самый распространенный способ использования свойства vertical-align. Выравнивает изображение по центру относительно текстовой базовой линии. Чаще всего результат будет кроссбрузерным.
Браузеры отлично справляются с вычислением высоты текста и изображения в пикселях и выравниванием картинки по центру.
Имейте ввиду, если изображение будет больше, чем текущий размер текста и высота строки, то картинка будет толкать следующие строки вниз, если не будет помещаться:
Text-bottom
В отличии от baseline выравнивает элемент по нижнему краю текста, включая подстрочные элементы. Изображение выравнивается по нижним выступающим частям текста:
Text-top
Противоположно text-bottom, выравнивает элемент по самой высокой точке текущего шрифта. Например, на рисунке изображен шрифт Georgia и у него есть более высокие выступающие элементы, чем в написанном слове. Элемент выравнивается по ним. Отсюда небольшой зазор.
Top и Bottom
Top и bottom аналогичны text-top и text-bottom, но выравнивание не ограничивается текстом. Например, если два изображения разного размера стоят в ряд с текстом, то их вершины (или основания) будут выровнены вне зависимости от текста.
Sub и Super
Эти значения отвечают за нижний и верхний индексы. Элементы выравниваются соответственно. Удобно для написания коротких математических формул (прим. переводчика).
Вертикальное выравнивание в ячейках таблицы
В отличии от выравнивания картинок контент в ячейках таблицы выровнен вертикально по центру:
Если вы хотите чтобы текст был расположен сверху или визу ячейки, то используйте значения top или bottom для вертикального выравнивания:
При вертикальном выравнивании в ячейках таблицы имеет смысл использовать только top, bottom или middle. Все остальные значения не дадут никакого визуального результата и будут иметь непредсказуемый результат в разных браузерах. Например, при использовании text-bottom в IE6 текст будет выровнен по нижнему краю ячейки, а в Safari4 — по верхнему. Sub выровняет текст по центру в IE6 и по верху в Safari4.
vertical-align и inline-block
Изображения, будучи строчными элементами, по факту ведут себя как inline-block. Вы можете задать им высоту и ширину и это сработает, в отличие от строчных собратьев.
Элементы inline-block ведут себя так же как изображения с вертикальным выравниванием, поэтому можете применять советы из пунктов выше. Тем не менее, следует помнить, что не все браузеры интерпретируют inline-block одинаково. Поэтому вертикальное выравнивание может быть меньшей из ваших проблем. Но это совсем другая история. Хотя…
Устаревший атрибут
Время от времени вы будете сталкиваться с атрибутом valign. Он применяется к ячейкам таблицы для вертикального выравнивания. Например<td valign=”top”>. Следует отметить, что этот способ является устаревшим и его не стоит применять. Действительно нет никаких оснований для его использования, поскольку все это вы можете сделать при помощи CSS.
vertical-align
Свойство CSS vertical-align описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).
Свойство vertical-align может использоваться в двух контекстах:
- Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать <img> в строке текста:
- Для вертикального позиционирования содержимого ячейки таблицы:
Примечание: свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования блочных элементов.
| Начальное значение | baseline |
|---|---|
| Применяется к | строчным элементам и ячейкам таблиц. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | нет |
| Проценты | относятся к line-height самого элемента |
| Обработка значения | для процентов и значений длин, абсолютных длин или ключевых слов, если указаны |
| Animation type | длина |
Синтаксис
Свойство vertical-align задаётся одним из ключевых значений, указанных ниже.
Значения для строчных элементов
Значения относительно родительского элемента
Данные значения позиционируют элемент по вертикали относительно родительского элемента:
Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов (en-US) , таких как <textarea> (en-US), не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.
Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.
Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.
Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.
Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.
Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства line-height ) над базовой линией родительского элемента. Допустимы отрицательные значения.
Значения относительно строки
Следующие значения позиционируют элемент по вертикали относительно всей строки:
Выравнивает верхний край элемента и его потомков с верхним краем всей строки.
Выравнивает нижний край элемента и его потомков с нижним краем всей строки.
Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница внешнего отступа (margin).
Значения для ячеек таблицы
Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.
Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.
Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.
Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.