Другое

Как выровнять изображение по центру в HTML: основы CSS для новичков

Lorem ipsum dolor

Выравнивание изображения по центру 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. О них мы поговорим в следующих наших статьях.

Схожие статьи

Как развить Soft Skills и что это такое? Список полезных навыков
Другое

Как развить Soft Skills и что это такое? Список полезных навыков

DIY проекты или
Другое

DIY проекты или "сделай сам" на Arduino: самые интересные проекты

Другое

Как отсортировать данные в таблице? Сортировка данных в диапазоне

KDevelop для Windows, сфера ее применения и главные особенности
Другое

KDevelop для Windows, сфера ее применения и главные особенности

×