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

Хотите центрировать изображение с помощью CSS? Проблемы с выравниванием часто являются источником разочарования для веб-дизайнеров. К счастью, центрировать изображение с помощью CSS очень просто, и мы покажем вам, как это сделать за несколько шагов.

Как и в случае со многими задачами веб-дизайна, это можно сделать несколькими способами! В этой статье мы рассмотрим три основных метода. Давайте начнем!

1. Используйте свойство маржи

Настройка допуск Свойство — один из самых простых способов центрировать изображение по горизонтали с помощью CSS. Маржа является основным компонентом блочная модель CSS.

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

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

Какую бы ширину вы ни выбрали, у изображения должны быть равные левые и правые поля. Вы можете легко добиться этого, присвоив свойству margin значение авто:

центр изображения {
 дисплей: блок;
 поле слева: авто;
 поле справа: авто;
 ширина: 800 пикселей;
}

2. Используйте раскладку Flexbox

Этот метод требует помещения изображения в блочный элемент, обычно див:

Сделав это, вы можете добавить некоторые свойства, чтобы управлять его внешним видом. Вы будете использовать два свойства CSS.

Первый из них отображать свойство со значением, равным сгибаться. Вы также можете использовать flex для выравнивания элементов в HTML. Второе свойство, которое вы добавите в свой div, это выравнивание содержания, с его значением, равным центр вот так:

div.center {
 дисплей: гибкий;
 выравнивание содержимого: по центру;
}

3. Используйте устаревший центральный элемент

Лучшие веб-практики рекомендуют вам использовать CSS для стилей и HTML для семантики, поэтому вам не следует использовать этот метод HTML. центр тег, центрирующий свое содержимое по горизонтали, устарел в HTML5.

Но если вам нужно, вот как центрировать изображение, используя только HTML. Просто оберните изображение тег в центральном теге, например:

Вот как выровнять изображения в HTML

Мы показали вам три разных простых в использовании метода центрирования изображений в HTML-документе. Попробуйте их все и выберите тот, который лучше всего подходит для вас. Избегайте третьего метода, если у вас нет абсолютно никакого выбора!

Следует иметь в виду, что существует еще несколько способов центрирования изображений с помощью HTML и CSS. Одним из распространенных методов, который работает как для текста, так и для встроенных изображений, является выравнивание текста свойство.

Как выровнять текст по центру на веб-странице с помощью CSS

Читать дальше

Об авторе