Как выровнять изображение css

Для выравнивания изображения на странице с помощью CSS можно использовать свойства «display», «margin» и «text-align».

1. «display» — определяет тип отображения элемента. Если установить значение «block», то элемент будет отображаться в виде блока, занимающего всю доступную ширину. Если установить значение «inline-block», то элемент будет отображаться в виде инлайн-блока, который можно выравнивать по горизонтали и вертикали.
2. «margin» — позволяет задать отступы для элемента. Например, чтобы выровнять изображение по центру горизонтально, можно задать для него маргин «auto» слева и справа.
3. «text-align» — позволяет выравнивать содержимое элемента относительно его родительского элемента. Например, чтобы выровнять изображение по центру вертикально, можно задать для родительского элемента свойство «text-align: center».

Рассмотрим пример выравнивания изображения по центру:

img {
  display: block;
  margin: auto;
  text-align: center;
}

Здесь мы задаем для изображения тип отображения «block», чтобы оно занимало все доступное пространство по горизонтали, и маргин «auto» слева и справа, чтобы выровнять его по центру горизонтали. Также мы задаем для родительского элемента свойство «text-align: center», чтобы выровнять изображение по центру вертикали.

Если же необходимо выравнять изображение только по горизонтали, можно использовать только свойство «margin»:

img {
  display: block;
  margin: 0 auto;
}

Здесь мы задаем маргин «0» сверху и снизу и маргин «auto» слева и справа, чтобы выровнять изображение по центру горизонтали.