Как поднять текст в html

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) ячейки с нижним краем строки таблицы.

Name already in use

blog / articles / vertical-align.md

Go to file T
Go to line L
Copy path
Copy permalink

Open with Desktop
View raw
Copy raw contents Copy raw contents

Copy raw contents

Все способы вертикального выравнивания в CSS

Я думаю, многие из вас, кому приходилось заниматься версткой, сталкивались с необходимостью выравнивать элементы по вертикали и знают, какие сложности возникают при выравнивании элемента по центру.

Да, для вертикального выравнивания в CSS есть специальное свойство vertical-align с множеством значений. Однако на практике оно работает совсем не так, как ожидается. Давайте попробуем в этом разобраться.

Сравним следующие подходы. Выравнивание с помощью:

таблицы,
отступов,
line-height ,
растягивания,
отрицательного margin ,
transform ,
псевдоэлемента,
flexbox .

В качестве иллюстрации рассмотрим следующий пример.

Есть два элемента div , при этом один из них вложен в другой. Дадим им соответствующие классы — outer и inner .

Задача состоит в том, чтобы выровнять внутренний элемент по центру внешнего элемента.

Для начала рассмотрим случай, когда размеры внешнего и внутреннего блока известны. Добавим внутреннему элементу правило display: inline-block , а внешнему — text-align: center и vertical-align: middle .

Нпомню, что выравнивание применяется только к элементам, которые имеют режим отображения inline или inline-block .

Зададим блокам размеры, а также фоновые цвета, чтобы видеть их границы.

После применения стилей мы увидим, что внутренний блок выровнялся по горизонтали, а по вертикали нет: http://jsfiddle.net/c1bgfffq/

Почему так произошло? Дело в том, что свойство vertical-align влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда оно применяется к ячейкам таблицы). Поэтому применение данного свойства к внешнему элементу ничего не дало. Более того, применение этого свойства к внутреннему элементу также ничего не даст, поскольку строчные блоки ( inline-block ) выравниваются по вертикали относительно соседних блоков, а в нашем случае у нас один строчный блок.

Для решения данной проблемы существует несколько техник. Ниже подробнее рассмотрим каждую из них.

Выравнивание с помощью таблицы

Первое приходящее на ум решение — заменить внешний блок таблицей из одной ячейки. В этом случае выравнивание будет применяться к содержимому ячейки, то есть к внутреннему блоку.

Очевидный минус данного решения – с точки зрения семантики неправильно применять таблицы для выравнивания. Второй минус в том, что для создания таблицы требуется добавить еще один элемент вокруг внешнего блока.

Первый минус можно частично убрать, заменив теги table и td на div и задав табличный режим отображения в CSS.

Тем не менее внешний блок все равно останется таблицей со всеми вытекающими из этого последствиями.

Выравнивание с помощью отступов

Если высоты внутреннего и внешнего блока известны, то выравнивание можно задать с помощью вертикальных отступов у внутреннего блока, используя формулу: (H_outer – H_inner) / 2.

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

Выравнивание с помощью line-height

Если известно, что внутренний блок должен занимать не более одной строки текста, то можно воспользоваться свойством line-height и задать его равным высоте внешнего блока. Поскольку контент внутреннего блока не должен переноситься на вторую строку, рекомендуется также добавить правила white-space: nowrap и overflow: hidden .

Также данную технику можно применять и для выравнивания многострочного текста, если для внутреннего блока переопределить значение line-height , а также добавить правила display: inline-block и vertical-align: middle .

Минус данного способа заключается в том, что должна быть известна высота внешнего блока.

Выравнивание с помощью «растягивания»

Данный способ можно применять, когда высота внешнего блока неизвестна, но известна высота внутреннего.

Для этого нужно:

задать внешнему блоку относительное позиционирование, а внутреннему — абсолютное;
добавить внутреннему блоку правила top: 0 и bottom: 0 , в результате чего он растянется на всю высоту внешнего блока;
установить значение auto для вертикальных отступов внутреннего блока.

Суть этой техники заключается в том, что задание высоты для растянутого и абсолютно спозиционированного блока заставляет браузер вычислять вертикальные отступы в равном соотношении, если их значение установлено в auto .

Минус данного способа — должна быть известна высота внутреннего блока.

Выравнивание с помощью отрицательного margin-top

Этот способ получил широкую известность и применяется очень часто. Как и предыдущий, он применяется, когда высота внешнего блока неизвестна, но известна высота внутреннего.

Нужно задать внешнему блоку относительное позиционирование, а внутреннему — абсолютное. Затем необходимо сдвинуть внутренний блок вниз на половину высоты внешнего блока top: 50% и поднять вверх на половину собственной высоты margin-top : -H_inner / 2.

Минус данного способа — должна быть известна высота внутреннего блока.

Выравнивание с помощью transform

Данный способ похож на предыдущий, но он может быть применен, когда высота внутреннего блока неизвестна. В этом случае вместо задания отрицательного отступа в пикселях можно воспользоваться свойством transform и поднять внутренний блок вверх с помощью функции translateY и значения -50% .

Почему в предыдущем способе нельзя было задать значение в процентах? Так как процентные значения свойства margin вычисляются относительно родительского элемента, значение в 50% равнялось бы половине высоты внешнего блока, а нам нужно было поднять внутренний блок на половину его собственной высоты. Для этого как раз подходит свойство transform .

Минус данного способа в ограниченной поддержке свойства transform старыми версиями браузера IE.

Выравнивание с помощью псевдоэлемента

Это наиболее универсальный способ, который может применяться, когда неизвестны высоты обоих блоков.

Суть способа в добавлении внутри внешнего блока строчного блока inline-block высотой в 100% и задания ему вертикального выравнивания. В этом случае высота добавленного блока будет равна высоте внешнего блока. Внутренний блок выровняется по вертикали относительно добавленного, а значит, и внешнего блока.

Чтобы не нарушать семантику, строчный блок рекомендуется добавить с помощью псевдоэлемента before или after .

Минус данного способа — он не может быть применен, если внутренний блок имеет абсолютное позиционирование.

Выравнивание с помощью Flexbox

Самый современный способ вертикального выравнивания это использовать Flexible Box Layout (в народе известен как Flexbox ). Данный модуль позволяет гибко управлять позиционированием элементов на странице, располагая их практически как угодно. Выравнивание по центру для Flexbox — очень простая задача.

Внешнему блоку необходимо задать display: flex , а внутреннему — margin: auto . И это все! Красиво, правда?

Минус данного способа — Flexbox поддерживается только современными браузерами.

vertical-align¶

Свойство vertical-align выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.

Синтаксис¶

Значения¶

В качестве значения также можно использовать проценты, пиксели или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчёт ведётся от значения свойства line-height , при этом 0% аналогично значению baseline .

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения:

baseline Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента. bottom Выравнивает по нижнему краю ячейки. middle Выравнивает по середине ячейки. top Выравнивает содержимое ячейки по её верхнему краю.

Что такое 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.