• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как выровнять изображение HTML по центру (как выровнять картинку по вертикали средствами CSS)
Как выровнять изображение HTML по центру
Kosten
Дата: Пятница, 2019-05-31, 03:40 | Сообщение 1
Администраторы
Сообщений:22600
Награды: 56


Выравнивание изображений является важным навыком, который необходимо изучить при кодировании веб-страниц. К сожалению, по мере изменения кода некоторые 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 то можете ознакомиться в этой статье где все подробно описано.
Прикрепления: 0350920.png(136.6 Kb) · 3071708.png(10.5 Kb) · 0847720.png(17.3 Kb) · 2907341.png(17.2 Kb) · 6568175.png(15.6 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 2019-05-31, 04:11 | Сообщение 2
Администраторы
Сообщений:22600
Награды: 56


Элемент img представляет собой встроенный элемент, как дисплей значение inline-block. Его можно легко центрировать, то здесь добавляем text-align: center; свойство CSS к родительскому элементу, который его содержит. Чтобы центрировать изображение с помощью, text-align: center; вы должны поместить img внутреннюю часть элемента уровня блока, такого как div.

Так как text-align свойство применяется только к элементам уровня блока, вы помещаете его text-align: center; в элемент уровня блока переноса, чтобы добиться горизонтального центрирования img.

Центрирование изображения с помощью центра выравнивания текста

HTML

Код
<!DOCTYPE html>
<html>
  <head>
    <title>Центрируйте изображение, используя центр выравнивания текста</title>
    <style>
      .img-container {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="img-container">
      <img src="http://zornet.ru/_fr/81/8716905.jpg" alt="ZorNet.Ru — сайт для вебмастера">
    </div>
  </body>
</html>

Примечание: Родительский элемент должен быть блочным. Если это не блочный элемент, вы должны добавить display: block; свойство CSS вместе со text-align свойством.

Код
<!DOCTYPE html>
<html>
  <head>
    <title>Центрируйте изображение, используя центр выравнивания текста</title>
    <style>
      .img-container {
        text-align: center;
        display: block;
      }
    </style>
  </head>
  <body>
    <span class="img-container">
      <img src="http://zornet.ru/_fr/81/5764512.jpg" alt="Как выровнять изображение HTML по центру">
    </span>
  </body>
</html>

Отцентрируйте изображение, используя свойство CSS text-align

HTML

Код
<!-- Block parent element -->
<div class="img-container-block">
  <img src="http://zornet.ru/_fr/81/1375334.jpg" alt="Скрипты">
</div>

<!-- Inline parent element -->
<span class="img-container-inline">
  <img src="http://zornet.ru/_fr/81/3224741.jpg" alt="Шаблоны">
</span>

CSS

Код
.img-container-block {
  text-align: center;
}
.img-container-inline {
  text-align: center;
  display: block;
}

Изображение не является линейным элементом, поэтому оно идентифицируется по отношению к другим элементам. Некоторые подходы используют HTML, другие используют CSS, где некоторые считаются более "правильными" чем другие, поскольку они не являются устаревшими.

Демонстрация
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как выровнять изображение HTML по центру (как выровнять картинку по вертикали средствами CSS)
  • Страница 1 из 1
  • 1
Поиск: