CSS, HTML и многое другое…

Начинающие разработчики часто задаются вопросом: Как вертикально выравнивать изображения в тексте?
Давайте начнём с небольшого примера. Строка с текстом и небольшим изображением в виде квадрата.

Теперь давайте взглянем на 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

Верхняя граница изображения совпадает с верхним краем строки.

img {vertical-align: top}

Text-top

Верхняя граница изображения совпадает с верхней границей кегельной площадки шрифта.

img {vertical-align: text-top}

Middle

Вертикальная середина изображения выравнивается относительно средней линии текста.

img {vertical-align: middle}

Baseline

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

img {vertical-align: baseline}

Text-bottom

Нижняя граница изображения совпадает с нижней границей кегельной площадки шрифта.

img {vertical-align: text-bottom}

Bottom

Нижняя граница изображения совпадает с нижним краем строки.

img {vertical-align: bottom}

Sub

Нижняя граница изображения совпадает с основной линией текста в нижнем регистре.

img {vertical-align: sub}

Super

Нижняя граница изображения совпадает со основной линией (baseline) текста в верхнем регистре.

img {vertical-align: super}

Значение в различных единицах

Значения свойства vertical-align также можно задавать в различных единицах, например в %. Положительные значения поднимают изображение относительно высоты строки (line-height), отрицательные — опускают.

img {vertical-align: 30%}

img {vertical-align: -30%}

Значения заданные например в px или em выравнивают изображение не относительно высоты строки, а относительно основной линии текста.

Оригинал: Aligning inline images with the vertical-align property