Содержание
Хотя это не обязательно сложно, центрирование изображений на ваших веб-страницах может быть более сложным, чем вы думаете. Основная причина в том, что Тег является встроенным элементом, поэтому он ведет себя не так, как элементы уровня блока. Некоторые подходы используют HTML; другие используют CSS, и некоторые считаются более «правильными», чем другие, поскольку они не являются устаревшими. Чтобы продолжить, выберите метод из списка ниже и следуйте инструкциям.
- Использование атрибута стиля.
- Преобразование в элемент уровня блока.
- Использование тегов центра.
Использование атрибута стиля
Для поддержки HTML5 вы должны использовать атрибут style со значением text-align: center внутри элемента уровня блока; такой как
теги.
Пример HTML-кода
Чаевые
Добавление встроенного стиля, как показано выше, в идеале должно выполняться только один раз в документе. Если вам нужно центрировать несколько изображений, вам следует воспользоваться предложением ниже и создать класс CSS, чтобы уменьшить избыточный код и ускорить работу вашей веб-страницы.
Пример центра изображения с использованием приведенного выше кода
Преобразование в элемент уровня блока
Один из способов правильно отцентрировать изображения — это определить элемент как элемент уровня блока. Для этого добавьте правило в заголовок вашей страницы (показано в следующем примере) или связанный внешний CSS-файл.
Пример HTML-кода
.centerImage
{
выравнивания текста: центр;
отображения: блок;
}
С помощью этого кода вы можете применить класс centerImage к тег без необходимости вкладывать его в элемент уровня блока. Этот метод работает для нескольких изображений.
Пример центрированного кода изображения
Использование тегов
Вы можете центрировать изображение, заключив тег в тегах. Это действие центрирует эту и только эту картинку на веб-странице. Следует отметить, что этот метод устарел в HTML5 и не всегда будет работать во всех браузерах. Мы рекомендуем использовать этот метод только в том случае, если ни одно из вышеупомянутых предложений не работает, когда вы пытаетесь центрировать изображение.
