Да, с помощью CSS можно выравнивать изображения и управлять тем, как рядом или вокруг них располагается текст.
Для этого используют такие техники, как float, flex-контейнеры, CSS Grid, а также позиционирование и свойства выравнивания.
Конкретный подход выбирают в зависимости от задачи: обтекание текстом, выравнивание по центру или наложение текста поверх изображения.
Стили CSS позволяют не только задать размеры и отступы изображения, но и точно контролировать, как текст будет располагаться относительно него: обтекать, стоять рядом в одной строке или располагаться поверх.
Основные приёмы:
float: left/right — классический способ, при котором картинка «припаркована» слева или справа, а текст её обтекает.display: flex или CSS Grid — современные инструменты для размещения изображения и текста в одном ряду или колонке с предсказуемым выравниванием.position: relative/absolute — когда нужно закрепить текст поверх изображения (лейблы, подписи, оверлеи).text-align и margin: 0 auto — для горизонтального выравнивания картинок как блочных элементов внутри контейнера.vertical-align и display: inline-block — для выравнивания по вертикали, когда изображение и текст ведут себя как строчные блоки.На собеседовании важно показать, что вы осознаёте разницу между старым подходом с float (для простого обтекания) и более гибкими решениями на базе flex или Grid, а также понимаете, что абсолютное позиционирование уместно для фиксированных подписей и декоративных элементов поверх изображения.
Ниже показаны два типичных способа расположить изображение и текст с помощью CSS.
Пример 1: обтекание текста вокруг изображения с помощью float — подходит для статей и новостных блоков.
Пример 2: расположение изображения и текста в одном ряду с выравниванием по вертикали с помощью flex-контейнера.
Отметьте свой прогресс