Свойство vertical-align

Разбираемся с vertical-align

Луис Лазарис  9 марта 2012

«Опять vertical-align не работает!» — вздохнёт веб-разработчик.

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

В этой статье я постараюсь в понятной форме рассказать про это свойство.

Чего оно не делает

Распространенное заблуждение о vertical-align состоит в том, что применяясь к одному элементу, оно заставляет все элементы внутри него изменить свою вертикальную позицию. Например, когда элементу задан vertical-align:top, это подразумевает, что его содержимое поднимется к его же верхней границе.

Вспоминаются времена, когда мы делали раскладки на основе таблиц:

Что-нибудь…

В данном примере с ячейкой таблицы использование свойства valign (в настоящее время исключенного из HTML5) приведёт к тому, что элементы внутри ячейки прижмутся к её верху. И естественно, когда верстальщики начинают использовать vertical-align, они думают, что получится то же самое, и содержимое элемента выровняется в соответствии со значением свойства.

Но vertical-align работает не так.

Чем оно является на самом деле

Использование свойства vertical-align может быть разбито на три простых для понимания правила:

  1. Оно применяется только к строчным элементам inline или строчным блокам inline-block.
  2. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
  3. Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.

Иными словами, следующий код не даст никакого эффекта:

div { vertical-align:middle; /* эта строка бесполезна */ }

Почему? Потому что  — это не строчный элемент и даже не строчный блок. Конечно, если вы сделаете его строчным или строчным блоком, то применение vertical-align даст желаемый эффект.

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

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

Несколько картинок

Вот картинка с пояснительным текстом, которая поможет вам понять, что происходит при вертикальном выравнивании строчных элементов:

А вот пример, в котором есть несколько строчных элементов, один из которых прижат к верху.

Ключевые слова

Несколько ключевых слов, которые можно задавать в качестве значений для свойства vertical-align:

  • baseline, значение по умолчанию или «изначальное»
  • bottom
  • middle
  • sub
  • super
  • text-bottom
  • text-top
  • top

Возможно, многие из них вы не будете использовать, но было бы неплохо знать все имеющиеся варианты. Например, на демо-странице, из-за того что значение vertical-align для установлено как top, он выровнен по самому высокому элементу в строке (большой картинке).

Однако если вы не хотите выравнивать элемент относительно картинок или других строчных элементов, обладающих блочными свойствами, вы можете выбрать значение text-top или text-bottom, тогда элементы будут выравниваться относительно текста в строке.

О ключевом слове middle

К сожалению, правило vertical-align:middle не выровняет строчный элемент по середине самого высокого элемента в строке (как вы, возможно, ожидали).

Вместо этого значение middle заставит элемент выровняться по середине высоты гипотетической строчной буквы «x» (так же называемой x-height).

Обратите внимание

Потому, мне кажется, что это значение на самом деле должно называться text-middle, чтобы стало понятно, какой будет результат.

Взгляните на пример, где я увеличил размер шрифта так, чтобы размер x-height стал гораздо больше. После этого станет понятно, что значение middle не получится использовать очень часто.

Числовые значения

Возможно, вы не знали о том, что vertical-align принимает числовые и процентные значения. Однако это так, и вот примеры их использования:

input { vertical-align:100px; } span { vertical-align:50%; } img { vertical-align:-300px; }

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

Заключение

Если в одной фразе подводить итог о том, как использовать это традиционно неправильно понимаемое свойство, я бы сказал:

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

Перевод оригинальной статьи «Understanding CSS’s vertical-align Property» Луиса Лазариса (Louis Lazaris), опубликованной на сайте «Impressive Webs».

Перевод выполнил Андрей Мотошин.

Источник: https://web-standards.ru/articles/vertical-align/

vertical-align


текст1 у

Вот результат работы этого кода:

Границы строчно-блочных элементов выделены красным цветом.

Мы видим, что наш текст отформатирован так, как будто он написан в тетрадке. Я специально выбрал символ строчная буква «у», она пишется с «хвостиком» ниже базовой линии.

Теперь поменяем значение свойства vertical-align на bottom:

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

Далее, поменяем значение свойства vertical-align на middle:

Теперь элементы в строке выровнены по центру.

Ну и последний пример, поменяем значение свойства vertical-align на top:

Имеем ожидаемый результат: строчно-блочные элементы размещены по верхнему краю строки.

Задача посложнее

Давайте теперь решим такую задачу: нам нужно в этом контейнере разместить текст по центру вертикали контейнера #container.

Ключ решения такой задачи следующий: нужно высоту строки сделать равной высоте блока. Высоту строки можно задать с помощью свойства line-height.

Высота нашего контейнера height: 100px. Только тут нужно учитывать то, что у нашего контейнера уже есть padding: 2px, который накладывается с margin: 2px строчно-блочных элементов, но у них есть border: 1px, который также нужно учесть.

То есть, корректная высота строки line-height будет равна: height: 100px минус (padding: 2px + border: 1px) *2 (так как нужно учитывать верх и них) = 94px.

Итак, код:

текст1 у

Результат:

Другие значение: проценты, пикселы и т.д

Для свойства vertical-align в качестве значения можно использоывать проценты. При этом отсчет ведется от значения свойства line-height, при этом 0% соответствует значению baseline.

Если использовать пикселы или другие доступные в CSS единицы, то положительное число смещает элемент вверх относительно базовой линии, отрицательное число опускает элемент вниз.

Работа с ячейками таблицы

Когда свойство vertical-align применяется к ячейке таблицы, то выравнивается содержимое ячейки, а не она сама.

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

Свойство vertical-align: значения

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

Объектная модель

[window.]document.getElementById(«ID»).style.verticalAlign

Источник: http://komotoz.ru/uroki/css/vertical-align.php

Свойство vertical-align

Статья нуждается в доработке и будет доработана через некоторое время.

Свойство vertical-align устанавливает вертикальное выравнивание текста.

Внимание! Свойство работает только для строчных элементов inline, строчно-блочных (inline-block) и для таблиц. Для блочных элементов работать не будет!

Синтаксис

Свойство может принимать одно из следующих значений: baseline, bottom, top, middle, sub, super, text-bottom, text-top, значение, проценты, inherit:

селектор { vertical-align: значение;
}

Значения

ЗначениеОписание
baseline По базовой линии.
bottom По нижнему краю.
top По верхнему краю.
middle По центру.
sub Нижний индекс.
super Верхний индекс индекс.
text-bottom По самому нижнему краю строки.
text-top По самому верхнему краю строки.
значение Любые CSS единицы.
проценты В процентах.
inherit Наследует значение родителя.

Значение по умолчанию: middle.

Примеры

Значение middle

Обратите внимание на то, что vertical-align мы задаем тому, у кого текст больше по размеру (хотя интуитивно кажется, что нужно тому, у кого он меньше):

#span1 { vertical-align: middle; font-size: 40px; border: 1px solid green;
}
#span2 { border: 1px solid red;
}

Результат выполнения кода:

Значение baseline

#span1 { vertical-align: baseline; font-size: 40px; border: 1px solid green;
}
#span2 { border: 1px solid red;
}

Результат выполнения кода:

Значение bottom

Здесь vertical-align мы задаем тому, у кого текст меньше по размеру:

#span1 { font-size: 40px; border: 1px solid green;
}
#span2 { vertical-align: bottom; border: 1px solid red;
}

Результат выполнения кода:

Значение top

Здесь vertical-align мы задаем тому, у кого текст меньше по размеру:

#span1 { font-size: 40px; border: 1px solid green;
}
#span2 { vertical-align: top; border: 1px solid red;
}

Результат выполнения кода:

Значение text-top

#span1 { vertical-align: text-top; font-size: 40px; border: 1px solid green;
}
#span2 { border: 1px solid red;
}

Результат выполнения кода:

Значение text-bottom

#span1 { vertical-align: text-bottom; font-size: 40px; border: 1px solid green;
}
#span2 { border: 1px solid red;
}

Результат выполнения кода:

Значение sub

#span1 { vertical-align: sub; font-size: 40px; border: 1px solid green;
}
#span2 { border: 1px solid red;
}

Результат выполнения кода:

Значение super

#span1 { vertical-align: super; font-size: 40px; border: 1px solid green;
}
#span2 { border: 1px solid red;
}

Результат выполнения кода:

Источник: http://code.mu/css/vertical-align.html

vertical-align

12.0+ 4.0+ 1.0+ 1.0+ 4.0+ 1.0+

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

Если свойство применяется к строчному элементу, то оно влияет на выравнивание самого строчного элемента, а не его содержимого.

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

Допускается использование отрицательных значений.

Значение по умолчанию:

Применяется:

Анимируется:

Наследуется:

Версия:

Синтаксис JavaScript:

baseline (для строчных элементов), middle (для ячеек таблицы)
к строчным элементам (inline, inline-block) и ячейкам таблицы (table-cell)
да
нет
CSS1
object.style.verticalAlign=»bottom»

Синтаксис

vertical-align: baseline|величина|sub|super|top|text-top|middle|bottom|text-bottom|inherit;

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

ЗначениеОписание
baseline Базовая линия элемента выравнивается относительно базовой линии родительского элемента.
sub Выравнивает элемент по типу нижнего индекса.
super Выравнивает элемент по типу верхнего индекса.
text-top Выравнивает верхний край элемента относительно верхнего края шрифта родительского элемента.
text-bottom Выравнивает нижний край элемента относительно нижнего края шрифта родительского элемента.
middle Выравнивает середину элемента относительно базовой линии родительского элемента.
top Выравнивает верхний край элемента относительно верха самого высокого элемента в строке.
bottom Выравнивает нижний край элемента относительно нижнего края элемента, расположенного ниже всех в строке.
величина Смещает базовую линию текущего элемента на указанную величину вверх/вниз относительно базовой линии родителя. Величина смещения указывается в единицах измерения, используемых в CSS. Величина указанная в процентах вычисляются относительно высоты строки (line-height) установленной для элемента. При использовании положительного значения, элемент смещается вверх, при использовании отрицательного – вниз.
% Смещает базовую линию элемента на указанную величину вверх/вниз относительно базовой линии его родительского элемента. Величина смещения указанная в процентах вычисляется в зависимости от высоты строки. При использовании положительного значения, элемент смещается вверх, при использовании отрицательного — вниз.

Значения свойства для ячеек таблицы

ЗначениеОписание
top Выравнивает содержимое относительно верхнего края ячейки.
middle Выравнивает содержимое относительно середины ячейки.
bottom Выравнивает содержимое относительно нижнего края ячейки.
baseline (sub, super, text-top, text-bottom, величина, и %) Базовой линией ячейки таблицы является базовая линия первой текстовой строки в ячейке. Если в ячейке нет никакой текстовой строки, то базовой линией является нижний край элемента, расположенного внутри ячейки. Базовая линия, имеющая максимальную дистанцию до верхнего края ячейки таблицы, является базовой линией для всей строки. Значение baseline используется для выравнивания содержимого нескольких ячеек (для которых установлено выравнивание по базовой линии) по одной базовой линии в строке.

Пример

Демонстрация свойства vertical-aligns.

span#mySpan { background-color: yellow;

vertical-align: baseline;

}

Источник: https://puzzleweb.ru/css/pr_vertical-align.php

Разбираемся с CSS свойством vertical-align

«Vertical-align не работает!», — закричит web-разработчик.

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

В этой статья я попытаюсь рассказать все в наиболее понятной форме.

Читайте также:  Пример игры на бинарных опционах

Что оно не делает?

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

Это напоминает мне то, как мы это делали в дни, когда повсеместно использовалась табличная верстка:

Whatever…

В данном табличном случае свойство valign (устаревшее) поднимет все содержимое в td-элементе наверх.

Важно

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

Но vertical-align так не работает!

Как на самом деле работает vertical-align?

Свойство vertical-align подчиняется трем правилам:

  1. Применяется только к inline или inline-block элементам
  2. Оно влияет на выравнивание самого элемента, а не его содержимого (исключение, когда свойство применяется к ячейкам таблицы)
  3. Когда применяется к ячейкам таблицы, значение влияет на содержимое, а не на саму ячейку.

Другими словами, следующий код не будет иметь никакого эффекта:

div { vertical-align: middle; /* ничего не делает */ }

Почему? Потому что блочный элемент (block, а не inline). Конечно, вы можете конвертировать в inline или inline-block элемент, тогда vertical-align будет иметь эффект.

С другой стороны, при правильном использовании (на inline или inline-block блок элемента), вертикальное выравнивание выровняет целевой элемент по отношению к другим элементам.

Как высоко вверх или вниз элемент будет выравнен зависит от размеров встроенных элементов на той же линии.

Немного визуализации

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

Как видно, 3 левых элемента наседают на нашу воображаемую линию, а правый элемент со свойством vertical-align: top прижимается к верхней воображаемой линии. Воображаемая линия варьируется в зависимости от размеров элементов.

Источник: https://alexdev.ru/447

Вертикальное выравнивание строчных элементов. | CSS-Tricks по-русски

В CSS есть такое свойство, называется vertical align. И я думаю, вы не первый раз слышите об этом. Простейшее использование выглядит так:

img { vertical-align : middle; }

Обратите внимание, что в этом случае использования, свойство применяется к элементу img. Поскольку изображения являются строчными элементами, то располагаются они в строке, как если бы они были простым текстом. Но что именно значит «располагаются в строке»? Вот именно здесь появляется понятие «вертикальное выравнивание».

Совет

Атрибут может принимать следующие значения: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, или значение в процентах..

Некоторые пытаются использовать это свойство для элементов блочного уровня и, естественно, не получают ожидаемого результата. То есть если вы разместите один div внутри другого и захотите вертикально центрировать его, то vertical-align вам не поможет. Как поступать в таком случае я расскажу в отдельной статье.

Baseline

Значением по умолчанию для vertical-align является baseline. Изображения будут находиться на одной линии с текстом. Обратите внимание, что выступающие элементы символов, выступают за базовую линию. Картинки не выравниваются по этим выступам, поскольку это не базовая линия.

Middle

Возможно, наиболее используемое значение для vertical-align — это «middle» для изображений-иконок. Результат получается довольно кросс-браузерным.

Браузер центрирует высоту текста в пикселях с высотой картинки, опять же, в пикселях:

Необходимо запомнить, если изображение больше чем текущий размер шрифта и высота строки, то оно будет «вытолкнуто» вниз, если это необхоимо.

Text-bottom

Отличается от baseline тем, что изображение выравнивается по нижней линии текста (не базовая линия, а по линии выступающих частей текста). Картинки могут быть выравнены по этой линии таким образом:

Text-top

Противоположностью значения text-bottom является text-top. Самая высокая точка строки текста при текущем размере шрифта. Таким образом вы можете выровнять изображение по этой линии. Обратите внимание, что в примере используется шрифт Georgia, у которого, возможно, есть элементы выше, чем на рисунке. Поэтому вы видите небольшой отступ.

Top и Bottom

Top и Bottom работаю подобно свойствам text-top и text-bottom, но при выравнивании расчёт происходит не по высоте текущего текста, а по высоте максимального элемента в строке (например другой картинки). И при расопложении учитывается именно его верх (или низ).

Sub и Super

Эти значения используются для верхних (superscript) и нижних (subscript) индексов. При использовании этих значений, элементы выстраиваются таким образом:

Vertical Align on Table Cells

В отличии от картинок, у таблиц по умолчанию используется выравнивание по центру (middle).

Если вы хотите выровнять текст по верху или низу ячейки, используйте значения top и bottom для vertical-alignment:

Для вертикального выравнивания в ячейках таблицы, лучше всего использовать только эти значения (top, middle, bottom).

Использование других значений может привести к непредсказуемым результатам в разных броузерах. Например, text-bottom прижимает текст к низу в IE 6, а в Safari 4 — к верху.

Установка значения sub выравнивает по центру в IE 6, а в Safari 4, опять же, по верхней линии.

Vertical Align и элементы Inline-Block

Изображения, которые технически являются элементами строчного уровня, больше похожи по поведению на элементы с поведением inline-block, потому что можете им устанавливать размеры.

Inline-block-элементы, при вертикальном выравнивании, ведут себя точно так же, как картинки. Однако, стоит помнить, что не все броузеры обрабатывают inline-block-элементы одинаково, и поэтому vertical-align может не оправдать ваших ожиданий. Хотя это уже другая история…

Атрибут «valign»

Иногда вы можете встретить атрибут «valign» для вертикального выравнивания в ячейках таблицы (например,

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

Источник: http://www.css-tricks.ru/articles/css/what-is-vertical-align

Выравнивание по вертикали c помощью CSS

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

В данной статье мы рассмотрим:

  • свойство vertical-align, как и когда оно работает;
  • метод центрирования по вертикали элемента с известной высотой;
  • центрирование по вертикали элементов с изменяемой высотой.

Vertical-align

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

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

Ключевые значения vertical-align могут быть следующими:

  • baseline;
  • sub;
  • super;
  • text-top;
  • text-bottom;
  • middle;
  • top;
  • bottom.

Большинство из них не требует дополнительного объяснения. Стоит отметить только sub и super, которые отображают элемент как подстрочный и надстрочный, не изменяя при этом размер шрифта.

Рассмотрим наглядный пример вертикального выравнивания текста CSS с помощью vertical-align. У нас есть сетка с изображениями и текстом — все они разной высоты, поэтому не везде текст выравнивается красиво:

grilled bacon

tasty bacon

crispy bacon

bacon

Чтобы всё аккуратно выровнять, можно задать контейнерам сетки свойство display: inline-block и использовать для изображений свойство vertical-align: bottom. Если бы в нашем примере не было текста, можно было бы использовать vertical-align: middle и легко добиться нужного результата.

Центрирование по вертикали

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis aperiam quidem minima a qui ipsa deleniti nisi modi nesciunt dolores, consequatur dolorem, dignissimos debitis distinctio. Voluptas eligendi fuga voluptatem eos.

Если мы знаем высоту блока, можно использовать абсолютное позиционирование, чтобы осуществить CSS вертикальное выравнивание по центру.

Применив к контейнеру свойство position: relative, можно задать абсолютное позиционирование внутреннему блоку. Если присвоить свойствам top и left значение 50%, блок сдвинется на 50% от верхнего и левого краёв. Верхний левый угол блока окажется точно в центре контейнера:

.container { position: relative; background: #444; } .box { position: absolute; top: 50%; left: 50%; width: 400px; height: 200px; margin: -100px 0 0 -200px; color: #fff; background: #cc3f85; }

Обратите внимание

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

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

Адаптивное центрирование по вертикали

Fluid vertical center

Отличные результаты для центрирования по вертикали элементов с изменяемой высотой можно получить, объединив vertical-align: middle с псевдоэлементами. Возьмём тот же пример с блоком внутри контейнера, но в этот раз блок будет иметь изменяемую высоту.

Главный приём здесь — создать невидимый элемент (используя псевдоэлемент), который будет заполнять контейнер по высоте, и установить свойства display: inline-block и vertical-align:middle. После этого нужно выровнять внутренний блок, также установив ему свойства display: inline-block и vertical-align: center. Затем центрировать блок по горизонтали, используя text-align: center:

.container { height: 400px; margin: 20px; background: #444; font-size: 0; text-align: center; } .container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .box { display: inline-block; width: 50%; padding: 2em; border: 1px solid #000; background: #cc3f85; font-size: 1rem; vertical-align: middle; }

Теперь, когда изменяется ширина контейнера, также изменяется ширина дочернего блока в процентах, соответственно меняя его высоту. Но при этом к блоку применяется вертикальное выравнивание CSS div.

Перевод статьи “Vertical-Alignment in CSS” был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: https://www.internet-technologies.ru/articles/vyravnivanie-po-vertikali-c-pomoschyu-css.html

CSS: Вертикальное выравнивание текста

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

Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.

В качестве примера рассмотрим следующий фрагмент:

Some text<\p>

и попытаемся вертикально выровнять текст по центру блока и по нижнему краю блока.

Решение задачи

«Правильные» браузеры (включая MSIE

Большинство современных браузеров поддерживают CSS2.1, а именно значение table-cell для свойства display. Это даёт нам возможность заставить блок с текстом отображаться как ячейка таблицы и, воспользовавшись этим, выровнять текст по вертикали:

div { display: table-cell; vertical-align: middle;

}

или

div { display: table-cell; vertical-align: bottom;

}

Internet Explorer (до 7-й версии включительно)

Решить задачу выравнивания текста по нижнему краю блока в MSIE можно с помощью абсолютного позиционирования (тут нам пригодится строковой элемент вложенный в блок):

div { position: relative; } div span { display: block; position: absolute; bottom: 0%; left: 0%; width: 100%;

}

Этот набор правил работает и в «правильных» браузерах.

Указывать свойства
div span { display: block; width: 100%;

}

не обязательно, но они могут понадобиться, если помимо вертикального выравнивания текста планируется использовать также горизонтальное, например, text-align: center;.

Важно

Для вертикального выравнивания текста по центру блока исходный фрагмент придётся всё же усложнить — введём ещё один строковый элемент:

Читайте также:  Стоит ли создавать блог на бесплатной платформе

Статья по теме:  Как сделать фиксированный виджет в сайдбаре

Some text
Тогда искомый набор правил будет иметь следующий вид:

div { position: relative; } div span { display: block; position: absolute; top: 50%; left: 0%; width: 100%; } div span span { position: relative; top: -50%;

}

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

Существует другой способ решения этой задачи для MSIE — использование expression. Недостаток этого подхода — выравнивание не будет работать при отключенном Javascript, зато он позволяет обойтись меньшим количеством элементов-«оберток» (в идеальном случае вообще без них).

Заключение

Для практического использования остаётся только объединить решения для «правильных» браузеров и MSIE любым приемлемым способом (например, через условные комментарии).

Материал для изучения:

  • Vertical Centering in CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
  • Vertical centering using CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
  • Vertical align (www.cssplay.co.uk/ie/valign.html)
  • vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
  • Еще один способ вертикального выравнивания в CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Источник: https://fortress-design.com/css-vertical-alignment-text/

CSS vertical-align Свойство

Вертикальное выравнивание изображения:

img.a {    vertical-align: baseline;}img.b {    vertical-align: text-top;}img.c {    vertical-align: text-bottom;}img.d {    vertical-align: sub;}img.e {    vertical-align: super;

}

Свойство vertical-align задает вертикальное выравнивание элемента.

Значение по умолчанию:

Inherited:

Animatable:

Version:

Синтаксис JavaScript:

baseline
no
yes. Читайте о animatable
CSS1
object.style.verticalAlign=»top»

Поддержка браузера

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

Свойство
vertical-align 1.0 4.0 1.0 1.0 4.0

Синтаксис CSS

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

Значения свойств

ЗначениеОписание
baseline Элемент выравнивается по базовой линии родительского элемента. Это значение по умолчанию
length Поднимает или понижает элемент по заданной длине. Допустимы отрицательные значения. Читать о единицах длины
% Увеличивает или понижает элемент в процентах от свойства «высота строки». Допустимы отрицательные значения
sub Элемент выравнивается по базовому индексу родительского
super Элемент выравнивается по базовому индексу родительского
top Элемент выравнивается по верхней части самого высокого элемента на линии
text-top Элемент выравнивается по верхнему краю шрифта родительского элемента
middle Элемент помещается в середину родительского элемента
bottom Элемент выравнивается по нижнему элементу в строке
text-bottom Элемент выравнивается по нижнему краю шрифта родительского элемента
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Похожие страницы

CSS Справочник: CSS Text

HHTML DOM reference: verticalAlign Свойство

Источник: https://html5css.ru/cssref/pr_pos_vertical-align.php

Центрирование горизонтальное и вертикальное

В CSS есть всего несколько техник центрирования элементов. Если их знать, то большинство задач решаются просто.

Горизонтальное

text-align

Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center.:

Текст

Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

Текст

margin: auto

Блок по горизонтали центрируется margin: auto:

Текст

В отличие от width/height, значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV. Нужно поставить его явно.

Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto, то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

Вертикальное

Для горизонтального центрирования всё просто. Вертикальное же изначальное не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.

Есть три основных решения.

position:absolute + margin

Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50%:

Текст

Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.

Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

Если мы знаем, что это ровно одна строка, то её высота равна line-height.

Приподнимем элемент на пол-высоты при помощи margin-top:

Текст

При стандартных настройках браузера высота строки line-height: 1.25, если поделить на два 1.25em / 2 = 0.625em.

Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left.

Одна строка: line-height

Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height:

Текст

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

Таблица с vertical-align

У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.

В таблицах свойство vertical-align указывает расположение содержимого ячейки.

Его возможные значения:

baselineЗначение по умолчанию.middle, top, bottomРасполагать содержимое посередине, вверху, внизу ячейки.

Например, ниже есть таблица со всеми 3-мя значениями:

top middle bottom

Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle, и он будет отцентрирован.

Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell. Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD. И, в том числе, работает vertical-align:

Пример центрирования:

Кнопка
с любой высотой
и шириной

Этот способ замечателен тем, что он не требует знания высоты элементов.

Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

Чтобы его растянуть, нужно указать width явно, например: 300px:

Кнопка
с любой высотой
и шириной

Совет

Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.

Это можно починить, завернув «псевдоячейку» в элемент с display:table, которому и поставим ширину:

Кнопка
с любой высотой
и шириной

Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.

Центрирование в строке с vertical-align

Для инлайновых элементов (display:inline/inline-block), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.

В этом случае набор значений несколько другой:

Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

Допустим, высота внешнего элемента 120px. Укажем её в свойстве line-height:

Центрирован
вертикально

Работает во всех браузерах и IE8+.

Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner.

Центрирование с vertical-align без таблиц

Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align.

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

Пример:

Центрированный
Элемент

  • Перед центрируемым элементом помещается вспомогательный инлайн-блок before, занимающий всю возможную высоту.
  • Центрируемый блок выровнен по его середине.

Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before:

Центрированный
Элемент

В пример выше добавлено также горизонтальное центрирование text-align: center. Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.

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

Варианта два:

  1. Убрать лишний пробел между div и началом inner, будет ….
  2. Оставить пробел, но сделать отрицательный margin-left у inner, равный размеру пробела, чтобы inner сместился левее.

Второе решение:

Центрированный
Элемент

Центрирование с использованием модели flexbox

Данный метод поддерживается всеми современными браузерами.

Центрированный
Элемент

Плюсы:

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

Минусы:

  • Не поддерживается IE9-, IE10 поддерживает предыдущую версию flexbox.

Итого

Обобщим решения, которые обсуждались в этой статье.

Для горизонтального центрирования:

  • text-align: center – центрирует инлайн-элементы в блоке.
  • margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

Для вертикального центрирования одного блока внутри другого:

Если размер центрируемого элемента известен, а родителя – нет

Родителю position:relative, потомку position:absolute; top:50% и margin-top:-. Аналогично можно отцентрировать и по горизонтали.

Если нужно отцентрировать одну строку в блоке, высота которого известна

Поставить блоку line-height: . Нужны конкретные единицы высоты (px,em…). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height.

Высота родителя известна, а центрируемого элемента – нет.

Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block.

Высота обоих элементов неизвестна.

Три варианта:

  1. Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell(IE8) или реальной таблицы, и поставить ему vertical-align:middle. Отлично работает, но мы имеем дело с таблицей вместо обычного блока.
  1. Решение с вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
  2. Решение с использованием flexbox.

Источник: https://learn.javascript.ru/css-center

Глубокое погружение в CSS: показатели шрифтов, line-height и vertical-align | Типичный верстальщик

Line-height и vertical-align — это простые CSS свойства. Они настолько просты, что большинство из нас убеждено в том, что в полной мере понимают, как они работают и как их использовать. Но это не так.

В действительности же они сложны. Можно даже считать, что они являются самыми сложными свойствами, т.к.

они играют важную роль в создании мало известной особенности CSS: в строчном форматировании текста.

Например, line-height может быть установлен в качестве длины или безразмерного значения, но по умолчанию у него задано значение normal. Окей, но что такое normal? Пишут, что чаще всего это 1 или может даже 1.2. Но даже в спецификации по CSS нет ясного ответа на этот вопрос.

Мы знаем, что line-height — безразмерное свойство относительно родительского значения font-size, но проблема заключается в том, что font-size: 100px выглядит по разному, в зависимости от семейства шрифта. Вопрос: значение line-height всегда одинаковое или разное? Действительно ли значение варьируется между 1 и 1.

2? А vertical-align? Каково его влияние в отношении line-height?

Глубокое погружение в CSS не такой простой механизм…

Давайте сперва поговорим о font-size

Посмотрите на простой HTML код. Тег p содержит три span, каждый из которых имеет свой собственный font-family:

Ba Ba Ba p { font-size: 100px } .a { font-family: Helvetica } .b { font-family: Gruppo } .c { font-family: Catamaran }

Используя некоторое значение font-size с различными font-family, мы получаем элементы разной высоты:

Обратите внимание

Разные font-family, одинаковое значение font-size, получаем разную высоту элементов

Почему font-size: 100px не создает элементы с высотой в 100px? Я измерил и получилось:

  • Helvetica — 115px;
  • Gruppo — 97px;
  • Catamaran — 164px.

Элементы со значением font-size:100px имеют разную высоту

Все это кажется немного странным, на первый взгляд, но это вполне объяснимо. Причина находится внутри самого шрифта. Вот как это работает:

  • шрифт определяется его em-квадратом (или единицей em) своего контейнера, в котором будет нарисован каждый символ. Этот квадрат использует относительные единицы и обычно устанавливает значение на уровне 1000 единиц. Но здесь также может применяться значение 1024, 2048 и т.д.
  • устанавливается на основе своих относительных единиц, показателей шрифтов (ascender, descender, capital height, x-height и т.д.). Обратите внимание, что некоторые значения могут выходить за пределы em-квадрата.
  • в браузере относительные единицы масштабируются, чтобы нужный размер соответствовал шрифту.
Читайте также:  Атрибут position в html

Давайте возьмем шрифт Catamaran и откроем его в FontForge, чтобы получить его показатели:

  • em-квадрат 1000;
  • Ascender — 1100 и Descender — 54. После выполнения некоторых тестов, окажется, что браузеры используют значения HHead Ascent/Descent  на Mac OS, а также значения Ascent/Descent на Windows (эти значения могут отличаться!). Отметим также, что прописная буква имеет высоту 640px и высота обычной буква составляет 485px.

Значения шрифта в FontForge

Это значит, что шрифт Catamaran использует 1100 + 540 единиц при 1000 единиц в em-квадрате, который дает высоту 164px, в то время, как в настройках указано font-size: 100px.

 Эта вычисленная высота определяется как контент-область (content-area) элемента и я буду использовать этот термин далее в этой статье.

Вы можете думать о контент-области, как об области, для которой применяется свойство background.

Мы также можем увидеть, что заглавные буквы имеют высоту 68px (680 единиц) и строчные буквы (x-height) — 49px (485 единиц).  В результате, 1ex = 49px и 1em = 100px, а не 164px (к счастью, em основан на размере шрифта, а не на вычисленной высоте).

Шрифт Catamaran: эквивалент UPM и пикселей при использовании font-size: 100px

Прежде чем идти дальше, оставлю некоторое пояснение. Когда элемент  отображается на экране, то он может состять из нескольких линий, в соответствии с его шириной. Каждая строка состоит из одного или нескольких inline-элементов (HTML-теги или встроенные imline-элементы для текстового содержимого) и имеет название line-box.

Высота line-box основана на высоте его дочерних элементов. Таким образом, браузер вычисляет высоту для каждого inline-элемента, и, следовательно, высоту line-box (от высшей точки своего дочернего элемента к самой нижней точке своего дочернего элемента).

В результате line-box — достаточно высок, чтобы содержать все свои дочерние элементы (по умолчанию).

Если обновить предыдущую страницу HTML код, то получим:

Good design will be better. Ba Ba Ba We get to make a consequence.

Он будет генерировать три line-boxes:

  • первый и последний, каждый из которых содержит единственный встроенный элемент (содержание текста)
  • второй, содержащий два встроенных элемента и три

Тег (черная рамка) сделана из line-boxes (белые границы), которые содержат inline-элементы (сплошные границы) и анонимные inline-элементы (пунктирные границы)

Мы ясно видим, что второй line-box выше остальных, в связи с вычисленной контент-областью его дочерних элементов, один из которых использует шрифт Catamaran.

Трудным в создании line-box является то, что мы не можем видеть и управлять им с помощью CSS. Даже применяя background с псевдоклассом ::first-line не дает нам ни какой визуальной подсказки о высоте line-box.

line-height: к проблемам и за ее пределами

Ранее я ввел два понятия: контент-область (content-area) и line-box. Если вы читали внимательно, то я сказал, что высота line-box вычисляется в соответствии с его дочерней высотой, я не сообщал дочерним элементам высоту их контент-области. В этом и заключается больше различие.

Хотя это может показаться странным, inline-элемент имеет две разные высоты: высоту content-area и высоту virtual-area (Я изобрел термин virtual-area , обозначая таким образом высоту, невидимую для нас. Этого термина Вы не найдете в спецификации).

  • высота content-area определяется показателями шрифта (как показано выше)
  • высота virtual-area — этоline-height , а также это высота, которая используется для вычисления высоты line-box

Inline-элементы, имеющие две разные высоты

Это ломает распространенное мнение о том, что line-height это расстояние между базовыми линиями (baselane). В CSS это не так.

В CSS, the line-height — это не расстояние между двумя базовыми линиями

Рассчитанная разность высот между virtual-area и content-area называется ведущей. Половина этой ведущей добавляется к верхней части content-area, другая часть — к нижней. Content-area располагается всегда в центре virtual-area.

На основе его значений, line-height (virtual-area) может быть больше, меньше или равной content-area. В случае меньшего размера virtual-area, ведущее значение станет отрицательным и line-box стане визуально меньше его дочернего элемента.

Существуют также другие виды inline-элементов:

  • inline-элементы (, , , etc.)
  • inline-block и все inline-* элементы
  • inline-элементы, которые используются в качестве форматирования текста (например, во flexbox-элементах)

Для этих inline-элементов, высота вычисляется на основе height, margin и border. Если height имеет значение auto, то line-height используется в content-area и строго равна line-height.

Inline замещаемые элементы, inline-block/inline-* и blocksified inline элементы имеют контент-область, равную их высоте или высоте линии

Итак, вернемся к FontForge. Em-квадрат шрифта Catamaran равен 1000, но мы видим значения ascender/descender:

  • Ascent/Descent: ascender — 770 и descender — 230. Используется для символьных рисунков. (табл. “OS/2”)
  • показатели Ascent/Descent: ascender — 1100 и descender — 540. Используется для высоты content-area. (табл. “hhea” и табл. “OS/2”)
  • показатель Line Gap. Используется дл line-height: normal, путем добавления этого значения показателей Ascent/Descent. (табл. “hhea”)

В нашем случае, шрифт Catamaran определяет разрыв в 0 единиц для line gap, поэтому line-height: normal будет равен content-area, который составляет 1640 единиц, иначе 1.64.

В качестве сравнения, шрифт Arial описывает em-квадрат в 2048 единиц, ascender — 1854, descender — 434 и line gap составляет 67. Это означает, что font-size: 100px дает content-area — 112px (1117 единиц) и line-height: normal — 115px (1150 единиц, иначе 1.15). Все эти показатели шрифта устанавливаются разработчиком шрифта.

Становится очевидным, что установка line-height: 1 плохая практика.Я хотел бы напомнить вам, что безразмерное значение относительно для font-size и virtual-area меньше, чем content-area. Именно это и является источником многих наших проблем.

Используя line-height: можно создать line-box меньше, чем контент-область

Уточнения о вычислении line-box:

  • для inline-элементов, padding и border увеличивают область фона, но не высоту content-area (или высоту line-box).Сontent-area — это не всегда то, что ты видишь на экране. margin-top и margin-bottom не имеют ни какого эффекта.
  • для inline-элементов, inline-block и blocksified inline-элементы: padding, margin и borderувеличивают height, а значит увеличивают content-area и высоту line-box

vertical-align: свойство, которое управляет всеми

Я еще не упомянул о свойстве vertical-align, несмотря на то, что оно важно для вычисления высоты line-box. Можно даже сказать, что vertical-align играет ведущую роль в форматировании текста.

Значение по умолчанию — baseline. Помните о показателях шрифта ascender и descender? Эти значения определяют, где базовая линия стоит, а значит определяет и ее соотношение. Т.к. соотношение между ascenders и descenders редко бывает 50:50.

Начнём с кода:

Ba Ba p { font-family: Catamaran; font-size: 100px; line-height: 200px; }

Тег  с двумя  унаследовал значения font-family, font-size и имеют постоянный line-height. Базовые линии (baselines) будут соответствовать и высота line-box  будет равна их line-height.

Те же значения шрифта, одинаковые исходные условия, кажется, что все в порядке

Что делать, если второй элемент имеет меньший font-size?

span:last-child { font-size: 50px; }

Важно

Как ни странно, но по умолчанию базовая линия может выровнять выше (!) line-box так, как показано на картинке. Я хотел бы напомнить вам, что высота line-box вычисляется от самой высокой точки своего дочернего элемента к низшей точке своего дочернего элемента.

Меньший дочерний элемент может привести к увеличении высоты line-box

Это может быть аргументом в качестве использования безразмерного значения line-height, но иногда необходимо его фиксировать, чтобы создать идеальный вертикальный размер. Если честно, то независимо от того, что вы выберете, вы всегда будете иметь проблемы с inline выравниванием.

Рассмотрим еще один пример. Тег  с line-height: 200px, содержащий один , унаследовал значение line-height

Ba p { line-height: 200px; } span { font-family: Catamaran; font-size: 100px; }

Насколько высок line-box? Следует ожидать, что 200px, но это не так. Проблема здесь заключается в том, что  имеет свой собственный font-family (по умолчанию serif).

Базовые линии тега  и  скорее всего, будут различны, а высота line-box выше, чем ожидалось.

Это происходит потому, что браузеры производят вычисления следующим образом: так, как если бы каждый line-box начинался бы с нулевой ширины символа.

В итоге, мы столкнулись с той же проблемой, что и в предыдущем примере.

Каждый дочерний элемент выравнивается так, как если бы его line-box появился бы с невидимой нулевой ширины символа

Базовая линия скачен, но что можно сказать на счетvertical-align: middle? Как пишут в спецификации, middle “выравнивает вертикальную среднюю точку контейнера с базовой линией родительского контейнера плюс половина x-height родительского блока”.

Соотношение базовых линий различны, а также  как различно соотношение x-height, следовательно выравнивание middle не надежно. Как правило, middle никогда не бывает по “середине”.

Этому способствуют много факторов в CSS (x-height, ascender/descender соотношение, и тд.)

В качестве примечания:

  • vertical-align: top / bottom выравнивает по верху и низу line-box
  • vertical-align: text-top / text-bottom выравнивает по верху и низу content-area

Vertical-align: top, bottom, text-top и text-bottom

Но используйте с осторожностью, это выравнивает virtual-area. Посмотрите это на простом примере, используя vertical-align: top. Невидимый line-height может привести к странным, но не удивительным, результатам.

vertical-align может привести к нечетным результат на первых порах, но предполагается, что line-height создаст визуализацию

И в заключении стоит отметить, что vertical-align также принимает числовые значения, которые повышают или понижают поле относительно базовой линии.

CSS превосходен

Мы поговорили о том, как line-height и vertical-align работают вместе, но теперь вопрос: можно ли управлять показателями шрифта с помощью CSS? Короткий ответ: нет.

Что делать, если, например, мы хотим, чтобы текст с помощью шрифта Catamaran, где высота заглавной буквы 100px стал выше? Давайте немного займемся математикой.

Сначала мы устанавливим все показатели шрифта в качестве CSS-свойств, а затем вычислим font-size,чтобы получить высоту заглавной буквы 100px.

p { /* font metrics */ —font: Catamaran; —capitalHeight: 0.68; —descender: 0.54; —ascender: 1.1; —linegap: 0; /* desired font-size for capital height */ —fontSize: 100; /* apply font-family */ font-family: var(—font); /* compute font-size to get capital height equal desired font-size */ —computedFontSize: (var(—fontSize) / var(—capitalHeight)); font-size: calc(var(—computedFontSize) * 1px); }

Высота заглавной буквы — 100px

Совет

Довольно просто, не так ли? Но что, если мы хотим, чтобы текст визуально стоял по середине? Так чтобы оставшееся пространство равномерно распределялось по верхней и нижней части буквы «B»? Для достижения этой цели, мы должны вычислить vertical-alignбазирующийся на соотношении ascender/descender.

Во-первых, установим line-height: normal и высоту content-area:

p { … —lineheightNormal: (var(—ascender) + var(—descender) + var(—linegap)); —contentArea: (var(—lineheightNormal) * var(—computedFontSize)); }

Затем нам нужно установить:

  • расстояние от нижней части буквы к нижнему краю
  • расстояние от верхней части буквы к верхнему краю

Вот так:

p { … —distanceBottom: (var(—descender)); —distanceTop: (var(—ascender) — var(—capitalHeight)); }

Теперь мы можем вычислить vertical-align, которая представляет собой разность между расстояниями, умноженное на величину font-size. (мы должны применить это значение для дочернего элемента inline)

p { … —valign: ((var(—distanceBottom) — var(—distanceTop)) * var(—computedFontSize)); } span { vertical-align: calc(var(—valign) * -1px); }

В конце концов, мы устанавливаем желаемый line-height и вычисляем его при сохранении вертикального выравнивания:

p { … /* desired line-height */ —lineheight: 3; line-height: calc(((var(—lineheight) * var(—fontSize)) — var(—valign)) * 1px); }

Результат установки для line-height разных значений. Текст всегда располагается по середине.

Добавить значок, высота которого соответствует букве «B», теперь легко:

span::before { content: ''; display: inline-block; width: calc(1px * var(—fontSize)); height: calc(1px * var(—fontSize)); margin-right: 10px; background: url('https://cdn.pbrd.co/images/yBAKn5bbv.png'); background-size: cover; }

Иконка и буква B имеют одинаковую высоту

Посмотрите результат на JSBin

Обратите внимание, что это демо предназначено только для демонстрационных целей. Почему? На это есть много причин:

  • показатели шрифта могут быть не постоянными ¯⁠⁠(ツ)⁠/⁠¯
  • если шрифт не загружен, то резервный шрифт, верноятно, будет иметь различные показатели шрифта и иметь дело с несколькими значениями, а значит — станет не управляемым.

Выводы

  • inline форматирование текста действительно трудно понять;
  • все inline-элементы имеют 2 высоты:
    • контент-области, иначе content-area (данные берутся из показателей шрифта)
    • виртуальная область, иначе virtual-area (line-height)
    • ни один из этих 2-х высот не может быть визуализирован.
  • line-height: normal основан на показателях шрифта
  • line-height: normal может создать virtual-area меньше, чем content-area
  • vertical-align не очень надёжен
  • высота line-box вычисляется на основе своих дочерних элементов со свойствами line-height и vertical-align
  • мы не можем легко получить / установить показатели шрифта при помощью CSS
  • есть спецификация, чтобы помочь с вертикальным выравниванием: Line Grid module

Но я до сих пор люблю CSS

Источник: https://tpverstak.ru/css-font-metrics-line-height-and-vertical-align/

Ссылка на основную публикацию