Размещение блоков вертикально css

vertical-align

Свойство CSS vertical-align описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).

/* ключевые значения */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* значения длины () */ vertical-align: 10em; vertical-align: 4px; /* процентные значения () */ vertical-align: 20%; /* глобальные значения */ vertical-align: inherit; vertical-align: initial; vertical-align: unset; 

Свойство vertical-align может использоваться в двух контекстах:

• Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать в строке текста:

p> top:img style="vertical-align:top" src="star.png"/> middle:img style="vertical-align:middle" src="star.png"/> bottom:img style="vertical-align:bottom" src="star.png"/> super:img style="vertical-align:super" src="star.png"/> sub:img style="vertical-align:sub" src="star.png"/> p> p> text-top:img style="vertical-align:text-top" src="star.png"/> text-bottom:img style="vertical-align:text-bottom" src="star.png"/> 0.2em:img style="vertical-align:0.2em" src="star.png"/> -1em:img style="vertical-align:-1em" src="star.png"/> 20%:img style="vertical-align:20%" src="star.png"/> -100%:img style="vertical-align:-100%" src="star.png"/> p> 

#*  box-sizing: border-box; > img  margin-right: 0.5em; > p  height: 3em; padding: 0 .5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto; width: 80%; > 

table> tr> td style="vertical-align: baseline">baselinetd> td style="vertical-align: top">toptd> td style="vertical-align: middle">middletd> td style="vertical-align: bottom">bottomtd> td> p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.p> p>Существует и другая теория, согласно которой это уже случилось.p> 

table  margin-left: auto; margin-right: auto; width: 80%; > table, th, td  border: 1px solid black; > td  padding: 0.5em; font-family: monospace; > 

Примечание: свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования блочных элементов.

Начальное значение	baseline
Применяется к	строчным элементам и ячейкам таблиц. Это также применяется к ::first-letter и ::first-line .
Наследуется	нет
Проценты	относятся к line-height самого элемента
Обработка значения	для процентов и значений длин, абсолютных длин или ключевых слов, если указаны
Animation type	длина

Синтаксис

Свойство vertical-align задаётся одним из ключевых значений, указанных ниже.

Значения для строчных элементов

Значения относительно родительского элемента

Данные значения позиционируют элемент по вертикали относительно родительского элемента:

Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов (en-US) , таких как (en-US), не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.

Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.

Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.

Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.

Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.

Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).

Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.

Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства line-height ) над базовой линией родительского элемента. Допустимы отрицательные значения.

Значения относительно строки

Следующие значения позиционируют элемент по вертикали относительно всей строки:

Выравнивает верхний край элемента и его потомков с верхним краем всей строки.

Выравнивает нижний край элемента и его потомков с нижним краем всей строки.

Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница внешнего отступа (margin).

Значения для ячеек таблицы

baseline (и sub , super , text-top , text-bottom , , и )

Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.

Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.

Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.

Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.

Допустимы отрицательные значения.

Формальный синтаксис

vertical-align =
[ (en-US) first | (en-US) last ] (en-US) || (en-US)
|| (en-US)

Пример

HTML

div>Изображение img src="frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.div> div>Изображение img class="top" src="frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по верхнему краю.div> div>Изображение img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по нижнему краю.div> div>Изображение img class="middle" src="frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по центру.div> 

CSS

img.top  vertical-align: text-top; > img.bottom  vertical-align: text-bottom; > img.middle  vertical-align: middle; > 

Результат

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Вертикальная пере­становка блоков средствами CSS

Автор: Марат Таналин Опубликовано: 2011-06-05 Обновлено: 2017-06-28 Краткое описание Кросс­браузерный способ полно­ценной вертикальной пере­становки блоков произвольной высоты средствами CSS.

Современные браузеры — Flexbox

Произвольный порядок

В современных браузерах (в том числе Internet Explorer 11 и Edge) управлять визуальным порядком элементов можно с помощью CSS-свойства order , являющегося частью механизма Flexbox . Блоки следуют в порядке возрастания значений свойства order . Значением свойства order должно быть целое число, которое может быть как положительным, так и отрицательным. Значение по умолчанию — 0 .

.example > .a /* Отобразится третьим */
.example > .b /* Отобразится вторым */
.example > .c /* Отобразится первым */

Объявление display: flex включает Flexbox для элемента-контейнера. Объявление flex-direction: column задаёт вывод дочерних элементов контейнера друг под другом вместо горизонтального вывода, используемого во Flexbox по умолчанию.

Вертикальное положение пере­упорядо­чиваемых блоков является взаимо­зависимым: увеличение высоты любого из блоков приводит к авто­мати­ческому вертикальному сдвигу визуально следующих за ним блоков, в том числе при динамическом изменении высоты блоков, например, вследствие увеличения размера шрифта средствами браузера.

Обратный порядок

Если требуется просто вывести элементы в обратном порядке, можно использовать объявление flex-direction: column-reverse для содержащего их контейнера без необходимости явно задавать расположение каждого элемента:

.example display: flex;
flex-direction: column-reverse;
>

Устаревшие браузеры — display: table

В браузерах, не поддерживающих Flexbox (IE 10 и ниже), вертикальный порядок следования блоков на HTML-странице можно изменить, придав им табличное представление при помощи CSS-свойств семейства display: table . Вне зависимости от порядка расположения блоков в HTML-коде, «шапка» ( display: table-header-group ) такой таблицы отображается в её верхней части, «подвал» ( table-footer-group ) — в нижней, а основная часть таблицы ( table-row-group ) — между ними.

.example display: table;
width: 100%;
>

.example > .a /* Отобразится внизу псевдотаблицы */
.example > .b /* Отобразится посередине */
.example > .c /* Отобразится вверху */

Описанным образом можно изменять порядок до трёх соседних блоков. Дополнительно можно задействовать display: table-caption (отображение блока в роли подписи к таблице) в сочетании с CSS-свойством caption-side со значением top или bottom .

Метод работает в большинстве распространённых браузеров, в том числе в Internet Explorer начиная с версии 9 (IE8 — с оговорками, см. далее).

Internet Explorer 6, 7 и 8 — DOM

Устаревшие браузеры IE6 и IE7 не поддерживают CSS-свойства семейства display: table* .

Кроме того, в IE8 в некоторых случаях наблюдается динамическая ошибка рендеринга: если перемещаемый блок содержит в себе псевдотабличные элементы ( display: table* ) (проявление нюанса замечено только в этом случае), возможно спонтанное пропадание некорых ячеек (всегда разных и в разном количестве) псевдотаблицы при первичной отрисовке страницы.

Поэтому для IE8 и ниже можно отменить CSS-правила, придающие блокам табличный вид, и дополнительно переместить блоки в нужные позиции DOM-дерева HTML-документа уже с помощью JavaScript:

/**
* Перестраивает соседние элементы в DOM-дереве в заданном порядке.
* @param elems Соседние элементы в необходимом порядке.
*/
function reorderElements(elems) // http://tanalin.com/articles/css-block-order/
var count = elems.length;

var parent = elems[0].parentNode;

for (var i = count — 1; i >= 0; i—) parent.insertBefore(elems[i], parent.firstChild);
>
>

Определение возможностей браузера

Использовать разные стили для современных и устаревших браузеров можно путём определения возможностей браузера средствами JavaScript.

Определить, поддерживает ли браузер Flexbox, можно путём проверки существования свойства order объекта, доступного через свойство style корневого элемента документа ( ) — document.documentElement .

Версию Internet Explorer можно определить путём проверки существования нестандартного объекта document.all , доступного только в IE 10 и ниже, в сочетании с существованием или отсутствием одного из стандартных объектов.

if (‘order’ in document.documentElement.style) // Flexbox-совместимый браузер.
// Используем `order` или `flex-direction: column-reverse`.
>
else if (document.all && !document.addEventListener) // IE8 или ниже.
// Изменяем реальный порядок блоков в DOM-дереве средствами JS.
>
else // Браузер без поддержки Flexbox, в том числе IE 9/10.
// Используем `display: table`.
>

Перепечатка любых материалов сайта в любом объёме запрещена

Источник