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

Быстрый ответ

Вертикальное выравнивание блока inline-block относительно текста можно выполнить с помощью CSS-свойства vertical-align: middle;. Данное свойство выравнивает центр элемента по базовой линии родителя и расчетной половине высоты его символов (x-height). Это позволяет контенту гармонично сочетаться с текстом.

<span style="vertical-align: middle;"> Вертикально центрированный контент – это просто! </span>

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

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

• baseline: Привязка элемента к базовой линии родителя. Это значение по умолчанию.
• middle: Центрирование элемента относительно базовой линии родителя и половины высоты его символов (x-height). Максимально надежный вариант.
• top / bottom: Расположение элемента по верхнему или нижнему краю bounding box'а родительского элемента.

Если элементу необходимо подстраиваться под размер контента, применяется display: inline-block. Например:

.dynamic-content {
  display: inline-block;
  vertical-align: middle;
}

При работе с браузерами устаревших версий обратите внимание на хак display: inline !ie7 для сохранения совместимости.

А что с таблицами?

Не стоит забывать о таблицах: стили inline-block также подходят для них. Вы можете применять любые CSS-стили для добавления индивидуальности таблице.

.table-inside-inline-block {
  background-color: #f7f7f7;
  font-size: 14px;
  font-weight: bold;
}

Изучите вертикальное позиционирование

Если вам интересна работа с вертикальным текстом, свойства writing-mode: vertical-rl; и text-orientation: upright; позволят вам расположить текст вертикально, как если бы он поднимался вверх.

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Помните о необходимости тестирования такого подхода на разных платформах и в разных браузерах.

Визуализация

Если представить вертикальное выравнивание в виде игры в бильярд, то принципы становятся ясными и понятными!

Как расставить шары в бильярде:

Примените vertical-align: middle, и все будет выглядеть идеально.

Усовершенствуйте умения в вертикальном выравнивании

Отрицательные отступы для тонкой настройки

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

.negative-margin {
  margin-top: -10px;
}

Подробнее об этом расскажет наш спикер на видео

Вызовите силу display: table-cell

Для создания сложных макетов используйте комбинацию display: table и display: table-cell. Это добавит макету изящества.

.container-dressed-as-table {
  display: table;
}

.child-masquerading-as-cell {
  display: table-cell;
  vertical-align: middle;
}

Flexbox для гибкости

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

.flex-container {
  display: flex;
  align-items: center;
}

Исследуем трудные моменты

Непонимание базовой линии: ожидаемое и реальность

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

Отличия в отображении в разных браузерах: подводные камни

Разные браузеры могут по-разному отображать вертикальное выравнивание. Помните о важности тестирования совместимости с различными браузерами.

Одновременное использование inline-элементов разного размера: возможные "подводные камни"

Если внутри одной строки используются inline-элементы разного размера, вертикальное выравнивание может быть нарушено. Решение – задание единого line-height.

Полезные материалы

1. Центрирование в CSS: Полное Руководство | CSS-Tricks
2. vertical-align – CSS: Каскадные таблицы стилей | MDN
3. html – вертикальное выравнивание с Bootstrap 3 – Stack Overflow
4. Окончательное руководство по использованию отрицательных отступов — Smashing Magazine
5. Кодни и учись на Codepen