Вертикальное выравнивание текста в span через CSS

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

Для вертикального центрирования содержимого внутри span используйте свойство display: inline-block; совместно с vertical-align: middle;. Помимо этого, задайте элементу span одинаковые значения высоты и line-height:

<span style="display: inline-block; vertical-align: middle; height: 30px; line-height: 30px;">
    Текст идеально отцентрирован!
</span>

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

Стратегия с применением line-height

Если требуется отцентрировать одну строку текста внутри span, достаточно задать line-height, равное высоте контейнера:

<span style="line-height: 50px;">
    "Здесь может быть ваш мем"
</span>

Следуя этой методике, высота строки line-height "совмещается" с высотой контейнера, что позволяет разместить текст ровно по центру.

Современность на стороне Flexbox

Flexbox — исключительно полезный инструмент для адаптивной верстки. Он предоставляет удобные способы для вертикального выравнивания элементов:

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

<div class="container">
  <span>Точно по центру</span>
</div>

Применяя Flexbox для контейнера, мы обеспечиваем лёгкость распределения элементов, не привязывая их к высоте контейнера – это практичное решение для адаптивных интерфейсов.

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

Процесс вертикального выравнивания элемента <span> можно ассоциировать с балансированием на канате:

До выравнивания:
🚲<span>🚴‍♂️</span>🧵 – Велосипедист свисает или стремительно погружается.

После выравнивания:
🧵
  ⬜️
<span>🚴‍♂️</span> – Вот он, велосипедист, ровно посередине идеально натянутого каната (line-height).
  ⬜️
🧵

В данном случае line-height функционирует как канат, а наша задача – сохранить содержимое (велосипедиста) в равновесии.

Практическое применение полученных знаний

Взаимодействие с инлайн элементами на экране

При работе с инлайн элементами, такими как изображения, использование свойства vertical-align: middle; с типом отображения inline-block создаст гармоничный вид:

<span style="display: inline-block; vertical-align: middle;">
    <img src="image.png" alt="" style="vertical-align: middle;">
    Изображение центрировано!
</span>

Случаи использования line-height

Избегайте установления жесткой высоты для span при использовании line-height для центрирования. Позвольте внешнему контейнеру определять высоту, а span пусть её наследует.

Обращение с многострочным текстом

Центрировать обширные тексты? Используйте контейнер с inline-block и задайте внутреннему элементу line-height: normal:

<div style="height: 100px; line-height: 100px; display: table-cell; vertical-align: middle;">
    <span style="line-height: normal; display: inline-block;">
        Многостишие<br>С такими выравниваниями уже искусство
    </span>
</div>

Обработка overflow

Для строки текста, которая должна уместиться в одну линию, примените white-space: nowrap;, чтобы текст не переходил на следующую линию:

.no-break {
  white-space: nowrap;
}

Битва браузеров

Не забывайте об отличиях в отображении в различных браузерах из-за специфики их рендеринга. Убедитесь в универсальности вашего решения.

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

1. vertical-align | CSS-Tricks — Всё о взаимодействии с vertical-align. Одобрено экспертами CSS.
2. vertical-align – CSS | MDN — Глубокое погружение в vertical-align в отличной статье на MDN.
3. A Complete Guide to Flexbox | CSS-Tricks — Ваш путеводитель в процессе профессионального освоения Flexbox.
4. The Definitive Guide to Using Negative Margins — Smashing Magazine — Детальный разбор применения отрицательных маргинов для вертикального выравнивания.
5. vertical-align | Codrops — Ознакомьтесь с множеством примеров использования vertical-align.
6. How To Center an Element Vertically | W3Schools — Отличный обучающий материал по вертикальному центрированию от W3Schools.
7. Tutorial | DigitalOcean — Незаменимый гайд по выравниванию в CSS для элементов любого размера.