Хотите центрировать изображение с помощью CSS? Проблемы с выравниванием часто являются источником разочарования для веб-дизайнеров. К счастью, центрировать изображение с помощью CSS очень просто, и мы покажем вам, как это сделать за несколько шагов.
Как и в случае со многими задачами веб-дизайна, это можно сделать несколькими способами! В этой статье мы рассмотрим некоторые из основных методов. Давайте начнем! Проверять Как редактировать веб-страницы в Safari с помощью Inspect Element.
1. Используйте функцию маржи
Установка свойства margin — один из самых простых способов центрировать изображение по горизонтали с помощью CSS. Поля являются важным компонентом шаблона блока CSS.
Во-первых, вам нужно будет преобразовать элемент изображения из встроенного элемента в блочный элемент. HTML-элементы блочного уровня занимают всю ширину своего родительского элемента и могут занимать всю ширину страницы.
Сделав элемент изображения блочным, вы сможете управлять его положением, регулируя его горизонтальные поля. Вам также потребуется установить определенную ширину для изображения, чтобы определить, сколько места изображение занимает на странице.
Какую бы ширину вы ни выбрали, у изображения должны быть одинаковые поля слева и справа. Вы можете легко добиться этого, присвоив свойству Margin автоматическое значение:
img.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
} 2. Используйте раскладку Flexbox
Этот метод требует, чтобы изображение было помещено в блочный элемент, обычно это div:
<div class=”center”> <img src=”xyz.jpg”> </div>
Как только вы это сделаете, вы можете добавить некоторые свойства для управления его внешним видом. Вы будете использовать два свойства CSS.
Первое — это свойство ширины со значением flex. Вы также можете использовать flex для выравнивания элементов в HTML. Второе свойство, которое вы добавите в div, — это justify-content со значением, установленным в центр следующим образом:
div.center {
display: flex;
justify-content: center;
} 3. Используйте центрирующий элемент
Лучшие веб-практики рекомендуют вам использовать CSS для стилей и HTML для семантики, поэтому вам не следует использовать этот метод HTML. Тег center, который центрирует свое содержимое по горизонтали, устарел в HTML5.
Но если вам нужно, вот как центрировать изображение, используя только HTML. Просто оберните тег img внутри центрального тега следующим образом:
<center> <img src=”xyz.jpg”> </center>
Вот как выровнять ваши HTML-изображения
Мы показали вам три различных, простых в использовании способа центрирования изображений в документе HTML. Попробуйте их все и выберите лучший для себя. Избегайте третьего метода, если у вас нет абсолютно никакого выбора!
Следует иметь в виду, что существует немало других способов центрирования изображений с помощью HTML и CSS. Одним из распространенных методов, который работает как с текстом, так и со встроенными изображениями, является функция выравнивания текста. Теперь вы можете просмотреть Веселые игры, которые помогут вам легко изучить программирование на CSS.
