Вертикальное центрирование текста рядом с изображением в CSS

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

Вертикальное выравнивание текста в соседстве с изображением возможно с помощью flexbox. Достаточно добавить к родительскому контейнеру, в котором расположены эти элементы, свойства display: flex и align-items: center;.

Ниже приведён простой пример кода:

.flex-center { 
  display: flex; 
  align-items: center; /* Вот где выравнивание происходит! 🎩✨ */
}

<div class="flex-center">
  <img src="your-image.jpg" alt="Просто потрясающая картинка.">
  <span>Текст, которым идеально смотрится в соседстве с картинкой.</span>
</div>

Таким образом, оба элемента будут выровнены по их средним линиям. Действительно просто!

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

Особенности элементов и их поведение

Разные HTML-элементы имеют различное поведение, поэтому понимание их нюансов является критически важным для корректного выравнивания. Давайте рассмотрим эти ситуации выравнивания более подробно.

Встроенный текст и изображение

При работе с небольшим объемом текста и встроенным изображением, стиль vertical-align: middle; можно применить непосредственно к тегу изображения:

<div>
  <img src="your-image.jpg" alt="" style="vertical-align: middle;">
  <span>Этот текст идеально отцентрирован, как чётко сбалансированный балансир.</span>
</div>

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

Работа с переменными высотами

Не знаете точных высот текста и изображения? Рассмотрите применение transform: translateY(-50%) с точным позиционированием. Это даст вам полный контроль независимо от неизвестных высот:

.valign-transform {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  /* Это не магия, это правило! ;) */
}

Многострочный текст рядом с изображением

Для корректного выравнивания многострочного текста в соседстве с изображением, позиция родительского элемента должна быть установлена как относительная, а тексту следует применить абсолютное позиционирование:

.multiline-container { position: relative; /* как родной дом */ }
.multiline-text {
  position: absolute; /* полетели, текст, вольные слова! */
  top: 50%;
  transform: translateY(-50%);
}

За пределами flexbox: альтернативы и нюансы

Хотя flexbox – это удобный и эффективный инструмент, он не всегда может подходить для каждой ситуации. Давайте рассмотрим альтернативные способы выравнивания и их использование:

Старые методы для старых браузеров

При поддержке устаревших браузеров можно использовать методы отображения таблиц:

.table-style { display: table; /* дедушкин метод */ }
.cell-style { display: table-cell; vertical-align: middle; /* все о балансе */ }

В HTML это будет выглядеть так:

<div class="table-style">
  <div class="cell-style">
    <img src="your-image.jpg" alt="">
  </div>
  <div class="cell-style">
    Даже если этот текст станет мини-романом, он всё равно будет вертикально выровнен.
  </div>
</div>

Повышение уровня мастерства

• Скажите "нет" искажению текста: Выровняйте строку текста, сделав line-height равным высоте контейнера.
• Пригласите адаптивный дизайн: Чтобы сохранить вертикальное выравнивание на всем диапазоне размеров экрана, добавьте margin: auto 0; внутри flex-контейнеров.
• Держитесь за макет: Скомпенсируйте смещение макета при масштабировании при помощи min-width на изображениях внутри flex-контейнеров.
• Используйте псевдоэлементы CSS: Улучшите контроль над выравниванием без дополнительного HTML, используя псевдоэлементы CSS.

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

Выравнивание – это прежде всего работа с пространственным балансом:

Позиция балансировки 🆚 Вертикальное выравнивание == Слева (⚖️👈🖼) -> Выравнивание по верху Сбалансировано (⚖️🖼👤) -> Выравнивание по центру Справа (⚖️👉👤) -> Выравнивание по низу

Идеальное равновесие выглядит так:

Изображение (🖼) Текст (👤) --------------------- 🖼 👤 Вертикальное выравнивание: по центру.

Создайте демонстрацию в режиме реального времени на платформах, таких как CodePen или JSFiddle, чтобы улучшить понимание выравнивания.

Совместимость с браузерами и тестирование

Использование этих техник выравнивания предполагает гарантию их кросс-браузерной совместимости. Проверьте caniuse.com, чтобы определить поддержку CSS-свойств в различных браузерах. Тестируйте на ранних этапах и регулярно, чтобы гарантировать универсальные результаты!

Адаптивные настройки

Адаптивное выравнивание учитывает изменяющиеся размеры экрана. Используйте пропорциональные единицы измерения (проценты или значения вьюпорта) и медиа-запросы, чтобы сохранить вертикальное выравнивание изображений и текста на всех устройствах.

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

1. Centering in CSS: A Complete Guide | CSS-Tricks — Здесь освещены основные принципы выравнивания в CSS.
2. vertical-align – CSS: Cascading Style Sheets | MDN — Официальная документация MDN по вертикальному выравниванию. Подробное руководство по свойству vertical-align.
3. How To Position Text Over an Image — Обучающий материал по позиционированию текста поверх изображения.
4. css – How to vertically align an image inside a div – Stack Overflow — Решения от сообщества по вертикальному выравниванию.
5. A Complete Guide to Flexbox | CSS-Tricks – CSS-Tricks — Flexible Box Layout для различных задач компоновки, включая вертикальное центрирование.
6. Vertical Centering — Solved by Flexbox — Cleaner, hack-free CSS — Практическая демонстрация использования flexbox для вертикального центрирования.
7. Absolute Horizontal And Vertical Centering In CSS — Smashing Magazine — Подробное обсуждение различных техник центрирования для гуру CSS.