Как выровнять элементы inline-block по верхней границе контейнера
Многие разработчики сталкиваются с проблемой выравнивания элементов inline-block. Проблема в том, что когда высота нескольких div отличается, div с наименьшей высотой не выравнивается по верхней границе контейнера. Мы покажем решение этой проблемы с помощью CSS свойств.
1. Создайте HTML
- Создайте с классом «container».
- Создайте два других span внутри «container». Первый div имеет название «small-box», а второй называется «big-box».
div span >span> span >span> div>2. Создайте CSS
- Задайте height и width для классов.
- Добавьте color, width и style к border.
- Задайте background для блоков и установите display в значение inline-block, которое отображает элемент в виде блока с внутренней стороны, а с внешней стороны он отображается как строчный элемент.
.container < border: 1px solid #666666; width: 350px; height: 150px; > .small-box< display: inline-block; width: 40%; height: 30%; border: 1px solid #666666; background: #1c87c9; > .big-box < display: inline-block; border: 1px solid #666666; width: 40%; height: 50%; background: #8ebf42; >Пример
html> html> head> title>Заголовок документа title> style> .container < border: 1px solid #666666; width: 350px; height: 150px; > .small-box< display: inline-block; width: 40%; height: 30%; border: 1px solid #666666; background: #1c87c9; > .big-box < display: inline-block; border: 1px solid #666666; width: 40%; height: 50%; background: #8ebf42; > style> head> body> div class="container"> span class="small-box"> span> span class="big-box"> span> div> body> html>Нашей проблемой является выравнивание .small-box по верхней границе контейнера.
Ключевое слово «top» свойства vertical-align поможет нам в этом вопросе.
Свойство vertical-align указывает вертикальное выравнивание строчного элемента. Значение «top» выравнивает верхний край элемента с верхней линией блока.
Необходимо применить его к .small-box только для того, чтобы он начинался сверху контейнера:
.small-box< vertical-align: top; >Теперь наша проблема решена с помощью использования только одного CSS свойства. Давайте посмотрим код полностью.
Пример
html> html> head> title>Заголовок документа title> style> .container < border: 1px solid #666666; width: 350px; height: 150px; > .small-box< display: inline-block; width: 40%; height: 30%; border: 1px solid #666666; background: #1c87c9; vertical-align:top; > .big-box < display: inline-block; border: 1px solid #666666; width: 40%; height: 50%; background: #8ebf42; > style> head> body> div class="container"> span class="small-box"> span> span class="big-box"> span> div> body> html>Рассмотрим пример, где высота одного из элементов div больше, чем высота остальных элементов .
Пример, где произошла ошибка:
Пример
html> html> head> title>Заголовок документа title> style> #box-one < background-color: #1c87c9; > #box-two < background-color:#8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height:100px; width:100px; display:inline-block; > .big < height:200px; width:200px; display:inline-block; > ul < display:block; > ul li< display:inline; > style> head> body> ul> li> span id="box-one" class="normal">Blue span> li> li> span id="box-two" class="normal">Green span> li> li> span id="box-three" class="normal">Grey span> li> li> span id="box-four" class="big"> Как выровнять верхние границы всех цветных div. span> li> ul> body> html>Нам просто необходимо заменить свойство display на свойство float со значением «left». Мы используем свойство float , которое в большинстве случаев используется вместе со свойством clear. Оно указывает, с каких сторон могут находиться плавающие элементы. В этом примере мы установили clear в «both». Это означает, что плавающие элементы запрещены с правой и левой стороны.
Пример
html> html> head> title>Заголовок документа title> style> #box-one < background-color: #1c87c9; > #box-two < background-color:#8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height:100px; width:100px; display:inline-block; > .big < height:200px; width:200px; display:inline-block; > ul < display:block; clear:both; content:""; display: table; > ul li< float:left; list-style-type:none; > style> head> body> ul> li> span id="box-one" class="normal">Blue span> li> li> span id="box-two" class="normal">Green span> li> li> span id="box-three" class="normal">Grey span> li> li> span id="box-four" class="big"> Как выровнять верхние границы всех цветных div. span> li> ul> body> html>В следующем примере можно увидеть выравнивание элементов уровня inline-block, используя ключевое слово «flex» свойства display, которое используется с расширением -Webkit-.
Пример
html> html> head> title>Заголовок документа title> style> div< color:#ffffff; display:flex; display: -webkit-flex; align-items:flex-start; -webkit-align-items:flex-start; > #box-one < background-color: #1c87c9; > #box-two < background-color:#8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height:100px; width:100px; display:inline-block; > .big < height:200px; width:200px; display:inline-block; padding:10px; > style> head> body> div> span id="box-one" class="normal">Blue span> strong id="box-two" class="normal">Green strong> span id="box-three" class="normal">Grey span> span id="box-four" class="big"> Как выровнять верхние границы всех цветных div. span> div> body> html>Как выровнять inline-элементы по верху?
Вопрос: Как сделать так, чтобы выравнивание было как в baseline, только по верхней границе текста?
Интересует вот такой результат (здесь я подгонял вручную по пикселям):
- Вопрос задан более трёх лет назад
- 183 просмотра
4 комментария
Простой 4 комментария
Все способы вертикального выравнивания в CSS
Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.
Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений. Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.
Сравним следующие подходы. Выравнивание с помощью:
- таблицы,
- отступов,
- line-height ,
- растягивания,
- отрицательного margin ,
- transform ,
- псевдоэлемента,
- flexbox .
Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы − outer и inner .
Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.
Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны. Добавим внутреннему элементу правило display: inline-block , а внешнему − text-align: center и vertical-align: middle .
Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .
Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.
.outer < width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; >.inner
После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет:
http://jsfiddle.net/c1bgfffq/
Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки ( inline-block ) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.
Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.
Выравнивание с помощью таблицы
Первое приходящее на ум решение − заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.
Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.
Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.
.outer-wrapper < display: table; >.outer
Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.
Выравнивание с помощью отступов
Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (Houter – Hinner) / 2.
.outer < height: 200px; >.inner
Минус решения — оно применимо лишь в ограниченном числе случаев, когда известны высоты обоих блоков.
Выравнивание с помощью line-height
Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .
.outer < height: 200px; line-height: 200px; >.inner
Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .
.outer < height: 200px; line-height: 200px; >.inner
Минус данного способа заключается в том, что должна быть известна высота внешнего блока.
Выравнивание с помощью «растягивания»
Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.
Для этого нужно:
- задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное;
- добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
- установить значение auto для вертикальных отступов внутреннего блока.
.outer < position: relative; >.inner
Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto .
Минус данного способа — должна быть известна высота внутреннего блока.
Выравнивание с помощью отрицательного margin-top
Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.
Нужно задать внешнему блоку относительное позиционирование, а внутреннему − абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top : -Hinner / 2.
.outer < position: relative; >.inner
Минус данного способа — должна быть известна высота внутреннего блока.
Выравнивание с помощью transform
Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .
.outer < position: relative; >.inner
Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .
Минус данного способа в ограниченной поддержке свойства transform старыми версиями браузера IE.
Выравнивание с помощью псевдоэлемента
Это наиболее универсальный способ, который может применяться, когда неизвестны высоты обоих блоков.
Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.
Чтобы не нарушать семантику, строчный блок рекомендуется добавить с помощью псевдоэлемента before или after .
.outer:before < display: inline-block; height: 100%; vertical-align: middle; content: ""; >.inner
Минус данного способа — он не может быть применен, если внутренний блок имеет абсолютное позиционирование.
Выравнивание с помощью Flexbox
Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox ). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox − очень простая задача.
Внешнему блоку необходимо задать display: flex , а внутреннему − margin: auto . И это все! Красиво, правда?
.outer < display: flex; width: 200px; height: 200px; >.inner
Минус данного способа − Flexbox поддерживается только современными браузерами.
Какой способ выбрать?
Нужно исходить из постановки задачи:
- Для вертикального выравнивания текста лучше использовать вертикальные отступы или свойство line-height .
- Для абсолютно позиционированных элементов с известной высотой (например, иконок) идеально подойдет способ с отрицательным свойством margin-top .
- Для более сложных случаев, когда неизвестна высота блока, нужно использовать псевдоэлемент или свойство transform .
- Ну а если вам повезло настолько, что не нужно поддерживать старые версии браузера IE, то, конечно, лучше использовать Flexbox .
vertical — align
Выравниваем элемент по вертикали без флексов и гридов.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 10 июля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство vertical — align выравнивает текстовые элементы по вертикали относительно друг друга.
�� Для простого текста это не особо актуально, то вот для строчно-блочных ( inline — block ) элементов это свойство может быть очень полезным.
Пример
Скопировать ссылку «Пример» Скопировано
Пусть у нас на странице есть три строчно-блочных элемента. Для объяснения работы свойства vertical — align они будут разной высоты:
div class="parent"> div class="element small">div> div class="element medium">div> div class="element big">div> div>
.element display: inline-block; width: 50px; height: 50px; background-color: white;> .medium height: 100px;> .big height: 150px;>.element display: inline-block; width: 50px; height: 50px; background-color: white; > .medium height: 100px; > .big height: 150px; >
-
text — top — верхняя часть элемента выравнивается по верхнему краю родителя:
Помимо ключевых слов можно использовать числовые значения.
Если указать значение в любых доступных единицах измерения, то положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательно — вниз.
Если указать числовое значение в процентах, то за 0% берётся нижняя граница текста без выносных элементов. То есть аналогично baseline . Процент рассчитывается от line — height родительского элемента.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Свойство vertical — align применяется к элементам, которые нужно выровнять, а не к родительскому элементу.
�� На всякий случай: вертикально — это сверху вниз. Слева направо — это горизонтально ��
�� Свойство очень пригождается когда нужно выровнять картинку или эмодзи относительно текста.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Свойство vertical — align каверзное. Многие начинающие разработчики пытаются применить его к родительскому элементу, по аналогии с text — align . И ничего не выходит. Просто запомни, что его нужно применять к тому элементу, который хочется выровнять.
�� С появлением флексбоксов выравнивание по вертикали производится при помощи align — items . Поэтому на свойство vertical — align стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах.