Начинающие разработчики часто задаются вопросом: Как вертикально выравнивать изображения в тексте?
Давайте начнём с небольшого примера. Строка с текстом и небольшим изображением в виде квадрата.
Теперь давайте взглянем на 6 основных линий относительно которых выполняется вертикальное выравнивание. На изображениях эти линии выделены красным цветом.
Линии текста
1. Top line — верхняя линия строки
2. Text-top line — линия над текстом, включая все символы над ним (символ ударения и т.п.). Верхняя граница кегельной площадки шрифта.
Кегельной площадкой называется прямоугольная область, на которой базируется каждый символ. Высота этой площадки называется кеглем шрифта.
Top line и text-top line на первый взгляд выглядят одинаково. Однако бывают ситуации когда top line располагается выше чем text-top line. Например, когда в тексте есть изображение, по высоте превосходящее кегель шрифта.
3. Middle line — средняя линия, проходящяя на уровне половины высоты буквы «x».
4. Baseline — основная линия текста. Воображаемая линия на которой «сидят» все буквы.
5. Text-bottom line — линия под текстом, включая нижние выносные элементы букв (например «j», «у», «ф»). Нижняя граница кегельной площадки шрифта.
6. Bottom line — нижняя линия строки.
Выравнивание изображений по умолчанию
По умолчанию, нижняя граница изображения совпадает с baseline, если к изображению не применяются внешние отступы. На примере ниже у изображения присутствует нижний внешний отступ, равный 5px.
Использование CSS для вертикального выравнивания
Для вертикального выравнивания с помощью CSS используется свойство vertical-align. Давайте рассмотрим различные варианты применения этого свойства.
Top
Верхняя граница изображения совпадает с верхним краем строки.
1 | img {vertical-align: top} |
Text-top
Верхняя граница изображения совпадает с верхней границей кегельной площадки шрифта.
1 | img {vertical-align: text-top} |
Middle
Вертикальная середина изображения выравнивается относительно средней линии текста.
1 | img {vertical-align: middle} |
Baseline
Несмотря на то, что изображения по умолчанию выравниваются относительно baseline, вы можете задать такое выравнивание вручную.
1 | img {vertical-align: baseline} |
Text-bottom
Нижняя граница изображения совпадает с нижней границей кегельной площадки шрифта.
1 | img {vertical-align: text-bottom} |
Bottom
Нижняя граница изображения совпадает с нижним краем строки.
1 | img {vertical-align: bottom} |
Sub
Нижняя граница изображения совпадает с основной линией текста в нижнем регистре.
1 | img {vertical-align: sub} |
Super
Нижняя граница изображения совпадает со основной линией (baseline) текста в верхнем регистре.
1 | img {vertical-align: super} |
Значение в различных единицах
Значения свойства vertical-align также можно задавать в различных единицах, например в %. Положительные значения поднимают изображение относительно высоты строки (line-height), отрицательные — опускают.
1 | img {vertical-align: 30%} |
1 | img {vertical-align: -30%} |
Значения заданные например в px или em выравнивают изображение не относительно высоты строки, а относительно основной линии текста.
Оригинал: Aligning inline images with the vertical-align property
Спасибо за обзор. А как с кроссбраузерностю всех этих способов? Радует то, что все они валидны.
Zodios, небольшие различия в выравнивании у браузеров есть, но они не существенны.
про проценты я что то забыл, спасибо за напоминание!
А как выровнять изоображение по горизонтали, если картинка прописана не в стилях css, а в index.html.
Виктор. Эта статья как раз описывает выравнивание изображений, которые находятся в тексте, т.е. используется тег
img.Очень часто встречаюсь с этой проблемой, и уходит много времени на исправление, спасибо за информацию, думаю сейчас это не станет для меня трудностью.
ета проблема встречается очень часто. я тоже сталкивался с ней, с приминением vertical-align все стало на свои места.
Спасибо за подробное объяснение.Пригодицца обязательно.
«Zodios, небольшие различия в выравнивании у браузеров есть, но они не существенны.»
Нихрена себе несущественны! А как насчёт позиционирования элементов формы, особенно чекбоксы и радио-кнопки? Там в разных браузерах такие сдвиги…
С элементами форм, согласен, посложнее будет. Я же имел ввиду примеры с изображениями.
Спасибо.
Пригодилось.
Спасибо за подробное объяснение. 2 дня парился с этим
Спасибо автору большое. Очень наглядно и подробно, Пятёрка
И все-таки, как быть с выравниваем картинки по вертикали в форме, когда картинка находится в input?
В IE и FF при использовании vertical-align: middle результаты, скажем так, слегка отличаются
спасибо за статью, очень помогла)