Выравнивание картинки по центру в css

По умолчанию изображение наследует свойства выравнивания у родительских тегов, а если они не указаны, то картинка по умолчанию будет прижата к левому краю. В данной статье разберем как выровнять картинку по центру в css, а также справа и слева.

Содержание статьи

- Как выровнять изображение по центру в css
- Как выровнять несколько картинок по центру в css

Как выровнять изображение по центру в css

Для выравнивания изображения по центру в css используются свойства:

1. display(вид визуального отображения). По умолчанию границы элемента картинки равны размерам(ширина, высота) и это свойство не позволяет ее отображать по центру. Поэтому для начала необходимо превратить картинку в блочный элемент, который будет занимать всю ширину родительского блока, при сохранении размеров изображения. Это позволит отобразить изображение по центру его же блока. Для задания картинке свойства блочного элемента, занимающего всю ширину, используется свойство display: block.

2. margin(внешние отступы). У свойства margin: y1 x1 y2 x2, значения y1 x1 y2 x2 отвечают за отступ сверху, справа, снизу и слева соответственно. Если вместо отступов x1 и x2 написать auto в css, то будет выравнивание картинки по центру относительно горизонтальной плоскости.

Пример кода как выровнять картинку по центру

Результат в браузере

Код страницы

<!DOCTYPE html>
<html lang="ru">
<head>

</head>
<body>

</body>
</html>

Как выровнять несколько картинок по центру в css

Часто возникают случаи, когда нужно выравнивание нескольких картинок по центру в css, для этих случаев удобно использовать родительский слой div, внутри которого будут изображения. Сам родительский слой div нужен, чтобы расположить изображения по центру.

Выравнивание нескольких изображений по центру в css делается с помощью размещения всех картинок внутри родительского тега <div>, который по умолчанию уже является блочными элементом, т. е. растянут на всю ширину. Но у тега <div> по умолчанию строчное выравнивание по левому краю, поэтому нужно установить свойству text-align значение «center», тогда все его содержание будет выровнено по центру. Должно получиться примерно так: <div style="text-align:center">...тут картинки...</div>.

Дополнительно у каждого изображения можно задать отступы, чтобы они не слипались друг с другом, а находились на некотором расстоянии между собой. Отступы делаются, через то же свойство margin, рассмотренное выше. У margin: y1 x1 y2 x2, цифры в пикселях y1 x1 y2 x2 отвечают за отступ сверху, справа, снизу и слева соответственно.