Как разместить картинку по центру в html
Ответы
Вячеслав Межуревский
02 ноября 2022
Для того чтобы отцентрировать изображение в блоке документа, проще всего воспользоваться Flexbox. Для создания условий работы с помощью flex, необходимо "обернуть" центрируемый элемент в контейнер. В нашем пример это просто тег <div>.
Рассмотрим пример:
<div class="img-box">
<img src="test-image.jpg">
</div>
Стили:
.img-box {
/* Сделаем видимую границу у контейнера */
border: 1px solid #000;
width: 300px;
height: 300px;
/* Включаем режим отображения flex и добавляем
центрирование по вертикали и горизонтали */
display: flex;
justify-content: center;
align-items: center;
}
Результат:
0
0