Начинающие разработчики часто задаются вопросом: Как вертикально выравнивать изображения в тексте?
Давайте начнём с небольшого примера. Строка с текстом и небольшим изображением в виде квадрата.
Теперь давайте взглянем на 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
когда будет хотя бы 200-300 реальных живых людей - можно начать проводить небольшие конкурсы с призами. Ранее проводить конкурсы никакого смысла нет.