0 ∞

Как выровнять и разместить изображение с помощью CSS

Чтобы поставить картинку у края или по центру, задайте CSS родителю либо самой картинке. При выравнивании текст идет до и после изображения, а при обтекании огибает его сбоку. Вы получите готовые примеры для трех моделей выравнивания, float, figure, flex, grid и адаптивных изображений.

<style>
  .quick-left { text-align: left; }
  .quick-right { text-align: right; }
  .quick-left img, .quick-right img {
    width: 240px;
    max-width: 100%;
    height: auto;
  }
</style>
<div class="quick-left"><img src="image.jpg" alt="Картинка слева"></div>
<div class="quick-right"><img src="image.jpg" alt="Картинка справа"></div>

Первая картинка окажется у левого края, вторая – у правого. Замените image.jpg адресом своего изображения. В остальных примерах HTML и CSS разделены пустой строкой: HTML вставляйте в тело страницы, CSS – в таблицу стилей или внутрь тега <style>.

МЛ

Мария ЛогутенкоОбновлено 29 октября 2026 5 мин чтения ∞

Какие CSS-свойства использовать для выравнивания изображений
Выравнивание по левому краю в CSS
Выравнивание по правому краю CSS-средствами
Выравнивание изображения по центру
Почему изображение не выравнивается
Обтекание изображения текстом: float
- Обтекание слева
- Обтекание справа
Как отменить обтекание
Изображения в ряд
- Flex с переносом
- Grid с auto-fill
Адаптивные изображения
- Одинаковые карточки
Вертикальное выравнивание картинки с текстом
- Картинка в строке текста
- Картинки во flex-контейнере

Какие CSS-свойства использовать для выравнивания изображений

Сначала определите модель размещения. text-align, justify-content и place-items получает родитель, а display, margin, float и размеры задаются картинке.

Задача	Свойство	К чему применять
Левый край	`text-align: left`	Родитель
Правый край	`text-align: right`	Родитель
Центр	`text-align: center`	Родитель
Центр блочной картинки	`display: block; margin: 0 auto`	Картинка
Положение во flex	`justify-content`	Родитель
Перенос картинок	`flex-wrap: wrap`	Родитель
Обтекание	`float`	Картинка
Отмена обтекания	`clear`	Следующий элемент
Адаптивная ширина	`max-width: 100%`	Картинка

Для figure задайте ширину и выравнивание всему блоку. Тогда картинка и подпись из figcaption сохранят общую позицию.

<figure class="figure-center">
  <img src="image.jpg" alt="Городской пейзаж">
  <figcaption>Городской пейзаж</figcaption>
</figure>

.figure-center {
  width: min(100%, 480px);
  margin: 0 auto;
  text-align: center;
}
.figure-center img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.figure-center figcaption {
  margin-top: 8px;
}

Браузер разместит картинку и подпись по центру блока шириной до 480 пикселей.

Выравнивание по левому краю в CSS

Для выравнивания картинки по левому краю родителя выберите простой контейнер, блочную модель или flex, если картинка участвует в общем макете.

text-align: left у родителя

<div class="image-left">
  <img src="image.jpg" alt="Картинка слева">
</div>

.image-left {
  text-align: left;
}
.image-left img {
  max-width: 100%;
  height: auto;
}

Родитель оставит картинку у своей левой границы.

Блочная картинка с margin-right: auto

<img class="image-block-left" src="image.jpg" alt="Блочная картинка слева">

.image-block-left {
  display: block;
  width: min(240px, 100%);
  margin-right: auto;
}

Блочная картинка прижмется влево, а свободное место останется справа.

Левый край во flex-контейнере

<div class="flex-left">
  <img src="image.jpg" alt="Картинка во flex-контейнере">
</div>

.flex-left {
  display: flex;
  justify-content: flex-start;
}
.flex-left img {
  max-width: 100%;
  height: auto;
}

Flex-контейнер разместит дочернюю картинку у своего начала.

Выравнивание по правому краю CSS-средствами

Чтобы разместить картинку у правой границы родителя, используйте text-align для одного изображения или автоматический левый отступ для блочного элемента.

text-align: right у родителя

<div class="image-right">
  <img src="image.jpg" alt="Картинка справа">
</div>

.image-right {
  text-align: right;
}
.image-right img {
  max-width: 100%;
  height: auto;
}

Родитель поставит картинку у своей правой границы.

Изображение, выровненное по правому краю

Блочная картинка с margin-left: auto

<img class="image-block-right" src="image.jpg" alt="Блочная картинка справа">

.image-block-right {
  display: block;
  width: min(240px, 100%);
  margin-left: auto;
}

Автоматический левый отступ вытолкнет картинку к правому краю.

Правый край во flex-контейнере

<div class="flex-right">
  <img src="image.jpg" alt="Картинка справа во flex">
</div>

.flex-right {
  display: flex;
  justify-content: flex-end;
}
.flex-right img {
  max-width: 100%;
  height: auto;
}

Flex-контейнер прижмет дочерний элемент к своему концу.

Выравнивание изображения по центру

Центрирование зависит от модели блока. Одна картинка удобно центрируется через родителя, блочная картинка – через автоматические отступы, а сложный макет – через flex или grid.

Центрирование через text-align

<div class="image-center">
  <img src="image.jpg" alt="Картинка по центру">
</div>

.image-center {
  text-align: center;
}
.image-center img {
  max-width: 100%;
  height: auto;
}

Строчная картинка окажется в центре строки родителя.

Центрирование через margin: 0 auto

<img class="image-auto" src="image.jpg" alt="Центрированная блочная картинка">

.image-auto {
  display: block;
  width: min(240px, 100%);
  margin: 0 auto;
}

Блочная картинка встанет по центру, если ее ширина меньше контейнера.

Центрирование через flex и grid

<div class="center-flex">
  <img src="image.jpg" alt="Картинка в центре flex">
</div>

<div class="center-grid">
  <img src="image.jpg" alt="Картинка в центре grid">
</div>

.center-flex {
  display: flex;
  justify-content: center;
}
.center-grid {
  display: grid;
  place-items: center;
}
.center-flex img,
.center-grid img {
  max-width: 100%;
  height: auto;
}

Flex центрирует картинку по горизонтали, а grid с place-items – по двум осям.

Почему изображение не выравнивается

Элемент img по умолчанию строчный. Поэтому text-align получает родитель, а картинка остается внутри его строки.

Автоматические отступы работают у блочного изображения. Картинка также должна быть уже контейнера, иначе свободного места для отступа не останется.

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

<div class="debug-parent">
  <img class="debug-image" src="image.jpg" alt="Картинка для проверки">
</div>

.debug-parent {
  text-align: center;
}
.debug-image {
  display: inline-block;
  max-width: 100%;
}

Родитель центрирует строчный или строчно-блочный элемент. Атрибут align у img устарел, поэтому используйте CSS.

Обтекание изображения текстом: float

Свойство float выносит картинку к левому или правому краю потока. Текст занимает свободное место сбоку, а отступ через margin отделяет его от изображения.

Обтекание слева

<div class="float-example">
  <img class="float-left" src="image.jpg" alt="Изображение слева от текста">
  <p>Текст этого абзаца обтекает изображение и продолжается под ним. Добавьте несколько предложений, чтобы увидеть границу обтекания.</p>
</div>

.float-example {
  display: flow-root;
}
.float-left {
  float: left;
  width: 220px;
  max-width: 45%;
  margin: 0 16px 12px 0;
}
@media (max-width: 600px) {
  .float-left {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
  }
}

На широком экране текст идет справа от картинки, а на узком изображение занимает отдельную строку.

Обтекание справа

<div class="float-example-right">
  <img class="float-right" src="image.jpg" alt="Изображение справа от текста">
  <p>Текст располагается слева от плавающей картинки. Добавьте несколько предложений, чтобы увидеть обтекание на всю высоту изображения.</p>
</div>

.float-example-right {
  display: flow-root;
}
.float-right {
  float: right;
  width: 220px;
  max-width: 45%;
  margin: 0 0 12px 16px;
}
@media (max-width: 600px) {
  .float-right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
  }
}

Картинка уйдет вправо, а текст заполнит пространство слева.

Для обтекания по форме соедините shape-outside с float. Свойство задает область, вокруг которой текст повторяет контур изображения.

<div class="shape-example">
  <img class="shape-image" src="image.jpg" alt="Круглая область обтекания">
  <p>Текст обтекает круглую область изображения и продолжает поток ниже.</p>
</div>

.shape-example {
  display: flow-root;
}
.shape-image {
  float: left;
  width: 220px;
  max-width: 45%;
  shape-outside: circle(45%);
  clip-path: circle(45%);
  margin: 0 16px 12px 0;
}

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

Как отменить обтекание

Плавающая картинка может влиять на следующий блок. Выберите clear для отдельного элемента или flow-root для контейнера, который должен охватить свои float.

clear: both у следующего элемента

<div class="clear-example">
  <img class="clear-float-left" src="image.jpg" alt="Плавающая картинка">
  <p>Этот текст обтекает картинку слева. Сделайте абзац длиннее, чтобы увидеть результат.</p>
  <div class="after-float">Этот блок начинается после картинки.</div>
</div>

.clear-float-left {
  float: left;
  width: 220px;
  margin: 0 16px 12px 0;
}
.after-float {
  clear: both;
  padding-top: 8px;
}

Значение both опустит блок ниже левых и правых плавающих картинок.

display: flow-root у контейнера

<div class="float-box">
  <img class="box-float-left" src="image.jpg" alt="Картинка внутри контейнера">
  <p>Контейнер учитывает высоту плавающего элемента благодаря новому контексту потока.</p>
</div>

.float-box {
  display: flow-root;
  border: 1px solid #ccc;
}
.box-float-left {
  float: left;
  width: 220px;
  margin: 0 16px 12px 0;
}

Граница контейнера охватит плавающую картинку и текст.

clearfix для старого кода

<div class="clearfix-box">
  <img class="clearfix-image" src="image.jpg" alt="Картинка в старом блоке">
  <p>Содержимое блока обтекает картинку и остается внутри контейнера.</p>
</div>

.clearfix-box::after {
  display: table;
  clear: both;
  content: "";
}
.clearfix-image {
  float: left;
  width: 180px;
  margin: 0 16px 12px 0;
}

Псевдоэлемент очищает float после содержимого старого контейнера. В новом коде удобнее выбрать display: flow-root.

Не вставляйте <br style="clear:both"> внутрь абзаца. Такой прием смешивает разметку и оформление.

Изображения в ряд

Flex и grid распределяют картинки внутри контейнера и переносят их на новую строку. Для галереи с одинаковыми карточками выбирайте grid, а для гибкого порядка элементов – flex.

Flex с переносом

<div class="image-row">
  <img src="image-1.jpg" alt="Первая картинка">
  <img src="image-2.jpg" alt="Вторая картинка">
  <img src="image-3.jpg" alt="Третья картинка">
</div>

.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.image-row img {
  flex: 1 1 min(180px, 100%);
  min-width: 0;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

Flex перенесет картинки, сохранит их пропорции и не выпустит их за границы контейнера.

Grid с auto-fill

<div class="image-grid">
  <img src="image-1.jpg" alt="Первая картинка в сетке">
  <img src="image-2.jpg" alt="Вторая картинка в сетке">
  <img src="image-3.jpg" alt="Третья картинка в сетке">
</div>

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 16px;
}
.image-grid img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

Grid создаст доступное число колонок, а при ширине контейнера меньше 180 пикселей оставит одну колонку.

Для галереи выбирайте flex или grid вместо плавающих элементов. При float: right первая картинка занимает правый край, следующая встает слева от нее. Если три картинки помещаются в одну строку, слева направо вы увидите порядок 3, 2, 1. При разной высоте плавающих изображений следующие картинки могут зацепиться за более высокую, нарушая ровный ряд.

Адаптивные изображения

Картинка должна помещаться в родителе на любом экране. Ограничьте ширину и сохраните автоматическую высоту, чтобы уменьшение не искажало пропорции.

<img class="responsive-image" src="image.jpg" alt="Адаптивное изображение">

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Браузер уменьшит изображение до ширины контейнера без горизонтальной прокрутки.

Одинаковые карточки

<div class="card-grid">
  <img class="card-image" src="image-1.jpg" alt="Первая карточка">
  <img class="card-image" src="image-2.jpg" alt="Вторая карточка">
  <img class="card-image" src="image-3.jpg" alt="Третья карточка">
</div>

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 16px;
}
.card-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

aspect-ratio задаст одинаковые рамки, а object-fit: cover заполнит их с обрезкой краев.

Чтобы сохранить все изображение, уберите object-fit: cover и оставьте height: auto. Поведение изображения внутри рамки описано в документации MDN по object-fit.

Вертикальное выравнивание картинки с текстом

Картинку внутри строки выровняйте через vertical-align. Для элементов в отдельном flex-контейнере задайте align-items.

Картинка в строке текста

<p>Текст и <img class="inline-image" src="icon.png" alt="Иконка"> картинка стоят на одной строке.</p>

.inline-image {
  width: 24px;
  vertical-align: middle;
}

Значение middle совмещает середину картинки с базовой линией родителя плюс половина высоты строчной буквы x.

Картинки во flex-контейнере

<div class="aligned-items">
  <img src="image.jpg" alt="Изображение в строке">
  <span>Подпись рядом с изображением</span>
</div>

.aligned-items {
  display: flex;
  align-items: center;
  gap: 12px;
}
.aligned-items img {
  width: 120px;
  max-width: 100%;
  height: auto;
}

Flex совместит вертикальные центры картинки и подписи.

Для одной картинки используйте модель родителя, для обтекания – float, а для галереи – flex или grid. Такое правило помогает быстро найти свойство, которое отвечает за положение изображения.

МЛ Мария Логутенкоавтор-переводчик источника