Центрирование изображений

  alexei 07/12/2021 - 09:46

Здесь вы узнаете, как центрировать изображение при помощи CSS.


Изображение по центру:

Париж

Как центрировать изображение

Шаг 1) Добавляем HTML:


<img src="paris.jpg" alt="Paris" class="center">

Шаг 2) Добавляем CSS:

Чтобы изображение отображалось по центру, установите свойствам margin-left и margin-right значение auto и сделайте элемент блоковым:


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Обратите внимание, что изображение не будет центрироваться, если его ширина будет установлена в 100%.