Выравнивание изображения по центру HTML можно выполнить несколькими способами. В зависимости от вашей ситуации, вы можете попробовать тот или иной метод.
Вообще, выравнивание текста или изображения по вертикали или горизонтали при помощи CSS — это довольно распространенное действие, которое является одним из основных при верстке HTML+CSS. Поэтому описанные ниже способы можете взять на вооружение и выравнивать не только изображения, но и другие блоки.
Выравнивание по центру HTML: несколько способов
Первый способ — это центрирование блока «div» или параграфа. Если вам нужно центрировать изображение, тогда вы помещаете его в один из этих блоков и центрируете блок.
Например:
Код HTML:
<p class=“imgCenter“>
<img src=“//полный адрес вашей картинки/img.jpg“ alt=“Выравнивание изображения по центру HTML“>
</p>
или блок div:
<div class=“imgCenter“>
<img src=“//полный адрес вашей картинки/img.jpg“ alt=“Выравнивание изображения по центру HTML“>
</div>
Код CSS будет таким:
.imgCenter {
text-align: center;
}
Как видите, здесь неважно, в какой блок мы поместим изображение, за выравнивание по горизонтали отвечает CSS-свойство «text-align: center».
Выравнивание по центру: по вертикали и горизонтали при помощи отступов CSS
Этот способ применяется по отношению к блочным элементам, но изображение — это строчный, а не блочный элемент. Поэтому, чтобы такое центрирование заработало, нам нужно изображение поместить в div и применить к нему свойство CSS display: block, чтобы представить его блоковым элементом.
Важно отметить, что такое CSS-выравнивание будет осуществляться по горизонтали и по вертикали.
Например:
Код HTML:
<div>
<img class=“imgCenter“ src=“//полный адрес вашей картинки/img.jpg“ alt=“Выравнивание изображения по центру HTML“>
</div>
Код CSS:
.imgCenter {
display: block;
margin: auto;
}
Заметьте, что в данном случае селектор класса мы добавляем самому изображению, а не блоку, в котором оно расположено. Еще один момент — margin:auto. В этом случае отступы изображения от краев блока div будут задаваться в автоматическом режиме. Если нужно, то можно задать их самостоятельно. Например: margin: 10рх 10рх или margin: 10px 11px 12px 13px. Когда мы задаем 2 значения у margin, то первое значение касается верхней и нижней части изображения, а второе значение — это левая и правая части изображения. Когда мы задаем 4 значения margin, то первое — это верх, второе — справа, третье — низ, четвертое — слева.
Заключение
Выравнивание по центру HTML изображения или любого другого блока сработает с одним из этих способов. Это самые простые способы. Но если вы используете свойство flex или grid, то там будут свои методы выравнивания изображения по центру при помощи CSS. О них мы поговорим в следующих наших статьях.

Другое