Выравнивание изображений является важным навыком, который необходимо изучить при кодировании веб-страниц. К сожалению, по мере изменения кода некоторые HTML-теги устаревают и не распознаются всеми веб-браузерами. Попробуйте эти методы для центрирования изображения в HTML. Если они не работают, рассмотрите кодирование в каскадных таблицах стилей CSS.
Хотя это не обязательно сложно, центрирование изображений на ваших веб-страницах может быть более сложным, чем вы думаете. Основная причина заключается в том, что IMG тег является встроенным элементом, поэтому он ведет себя иначе, чем блочные элементы.
Размещение и выравнивание изображений на странице HTML имеет решающее значение для макета страницы. Один из наиболее распространенных вопросов — как выровнять изображение по центру сечения. В этой статье мы собираемся обсудить множество возможных способов размещения изображений в центре.
Первое, что мы сделаем это создадим div с классом image-wrap, и в него добавим изображение.
Код
<div class="image-wrap">
<img src="http://zornet.ru/_fr/81/0978779.jpg" >
</div>
Дальше пропишем базовые стили для класса image-wrap. Это будет высота и ширина, немного больше чем картинка.
CSS
Код
.image-wrap {
width: 500px;
height: 300px;
border: 1px solid gray;
}
Результат ниже на скриншоте.
Способ 1. Добавляем картинке класс .image-center.
Способ заключается в том чтобы картинке добавить свойство display со значением block и так же правило margin:auto. Возможно вам уже знакома эта техника и вы ее использовали для центрирования div. Но так как изображение является строчным элементом нам необходимо добавить display:block.
Код
<div class="image-wrap">
<img src="http://zornet.ru/_fr/81/7889454.jpg" class="ZorNet.Ru — сайт для вебмастера">
</div>
CSS
Код
.image-center {
display:block;
margin: auto;
}
.image-center {
display:block;
margin: auto;
}
На скриншоте вы можете увидеть, что изображение отцентрировано.
Способ 2. Копируем html код который есть на данный момент, и диву image-wrap добавим еще класс image-align. А класс .image-center удалим.
Эта техника заключается в том, чтобы содержимое дива отцентрировать с помощью text-align : center. Стоить помнить, если мы добавим текст в див он тоже будет центрироваться вместе с картинкой.
HTML
Код
<div class="image-wrap image-align">
<img src="http://zornet.ru/_fr/81/6502376.png">
</div>
CSS
Код
.image-align {
text-align: center;
}
Смотрим результат:
Способ 3. Техника основывается на свойстве display : flex. Берем код html который использовали в способе 2 и меняем в нем класс image-align на image-flex.
Код
<div class="image-wrap image-flex" >
<img src="http://zornet.ru/_fr/81/0730266.jpg" >
</div>
Классу image-flex в css пишем:
Код
.image-flex {
display:flex;
align-items: center;
justify-content: center;
}
Свойство align-items центрирует изображение по вертикали, justify-content по горизонтали. В этом есть главное отличие и плюс от предыдущих способов, мы можем выравнивать картинку по двум осям.
Теперь у вас точно не возникнут вопросы как отцентрировать изображение по центру div то можете ознакомиться в этой статье где все подробно описано.
