Image background center: CSS background-position property

Однако этот элемент устарел в HTML4. Теперь, когда HTML5 стал стандартом, этот устаревший тег, скорее всего, не будет отображаться ни в одном из современных браузеров.

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

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

Как центрировать изображение по горизонтали в CSS

Существует три способа центрировать изображение по горизонтали. Первый лучше подходит для изображений меньшего размера, а второй — для изображений большего размера. Третий вариант работает лучше всего, если вы используете адаптивную модель макета Flexbox.

Мы рассмотрим все три, чтобы вы могли центрировать любое изображение, независимо от размера, на своем веб-сайте.

Способ 1. Использование свойства Text-Align

Чтобы центрировать изображение по горизонтали, можно использовать свойство CSS text-align. Поскольку это свойство работает только с элементами блочного уровня, а не со встроенными элементами, нам нужно поместить изображение в блочный элемент.

Вот как: 

• Откройте HTML-файл.
• Найдите изображение на странице, идентифицируемое по тегу .
• Оберните изображение в div .
• Добавьте объявление стиля в открывающий тег вашего div, например
  .
• Внутри кавычек задайте для свойства text-align значение center , т. е. text-align: center;.

Это просто, но важно отметить, что это работает, только если изображение меньше вашего окна просмотра.

Вот HTML со встроенным CSS и результат:

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

Способ 2. Использование свойства Margin

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

Вот как центрировать изображение с помощью свойства margin: 

• Откройте файл CSS.
• Найдите или создайте селектор CSS img .
• Внутри скобки стиля задайте для свойства display значение block . Это укажет браузеру обрабатывать изображение так, как если бы оно было блочным, а не встроенным элементом, что позволит вам использовать свойство поля CSS.
• Установите ширину изображения на фиксированное значение, чтобы оно не перекрывало область просмотра. В этом случае я буду использовать процентное значение 60%, но вы также можете использовать пиксели.
• Задайте для свойства margin значение auto , чтобы оба горизонтальных поля были равны.

Вот результат в CSS:

См. Pen Как центрировать изображение с помощью свойства Margin от HubSpot (@hubspot) на CodePen.

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

Способ 3. Использование свойства Flex

Вы также можете центрировать изображение по горизонтали, используя свойство flex (или flexbox), которое не требует вычисления полей.

Вот как:

• В HTML-файле найдите изображение, которое вы хотите центрировать.
• Установите ширину изображения на фиксированное значение длины, т. е. .
• Поместите изображение в элемент div. У вас также есть дополнительная возможность присвоить div идентификатор или класс. Таким образом, код центрирования применяется только к этому конкретному экземпляру, а не ко всем элементам div.
• Откройте файл CSS.
• Найдите свой селектор div или запишите свой идентификатор или селектор класса (#example или .example).
• Внутри фигурных скобок задайте для свойства display значение flex , которое сообщает браузеру, что div является родительским контейнером, а изображение — гибким элементом.
• Затем установите для свойства justify-content значение center .

Вот CSS с результатом:

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

Нажмите кнопку HTML, чтобы также увидеть код HTML.

Подсказка: как уже упоминалось, мы рекомендуем вам предоставить селектор ID для вашего div и использовать селектор в вашем коде CSS. Таким образом, все элементы div на вашем веб-сайте не будут затронуты.

Как центрировать изображение по вертикали в CSS

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

Способ 1. Использование свойства Position

Чтобы отцентрировать изображение по вертикали, вы можете поместить его в блочный элемент, такой как div, и использовать комбинацию свойства CSS position, свойств left и top и свойства transform.

Вот как: 

• В HTML-файле найдите изображение, которое вы хотите отцентрировать, и поместите его в элемент div.
• В файле CSS найдите селектор div или запишите свой идентификатор или селектор класса (#example или .example).
• Внутри фигурных скобок задайте для свойства position элемента div значение absolute , чтобы исключить его из обычного потока документов.
• Задайте для свойств left и top значение 50% . Это говорит браузеру выровнять левый и верхний край div, содержащего изображение, с центром страницы по горизонтали и вертикали (т.е. 50% вправо и вниз по странице).

Вот проблема: если края блока div выровнены посередине страницы, он будет выглядеть не по центру. Вот тут-то и появляется свойство преобразования CSS. Чтобы по-настоящему центрировать блок, содержащий изображение, вы можете использовать метод translate() для перемещения блока по осям X и Y.

Вот как:

• Установите для свойства transform значение translate(-50%, -50%) .
• Это перемещает элемент div на 50 % влево и вверх от его текущего положения, чтобы центр изображения совпадал с центром страницы.
• Затем задайте для свойства -ms-transform значение translate(-50%, -50%). Для перемещения влево и вверх вам нужно использовать отрицательные значения, что мы и сделали на этом шаге.

Вот CSS:

См. Pen Как центрировать изображение по вертикали с помощью свойства Position от HubSpot (@hubspot) на CodePen.

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

Способ 2. Использование свойства Flex

Как и раньше, когда мы центрировали изображение по горизонтали, вы можете использовать свойство flex для центрирования изображений по вертикали.

Вот как это сделать:

• В HTML-файле найдите изображение, которое вы хотите центрировать.
• Установите ширину изображения на фиксированное значение длины, т. е. .
• Оберните изображение в элемент div .
• В коде CSS найдите селектор div .
• Внутри фигурных скобок задайте для свойства display элемента div значение flex.
• Установить элементы выравнивания и выравнивания содержимого свойств в центр . Это укажет браузеру центрировать гибкий элемент (изображение внутри div) по вертикали и горизонтали.
• Затем установите высоту контейнера div на пропорциональную высоту.

Вот CSS с результатом:

См. Pen Как центрировать изображение по вертикали с помощью свойства Position от HubSpot (@hubspot) на CodePen.

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

Как центрировать изображение в Bootstrap

Вы можете центрировать изображение по вертикали и горизонтали в Bootstrap CSS, который представляет собой фреймворк с рядом удобных готовых классов CSS, которые помогут вам стилизовать веб-страницы.

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

Вот как: 

• В HTML-файле найдите изображение, которое вы хотите центрировать.
• Добавьте класс mx-auto к тегу изображения, т. е. .

Готово! Но если вы хотите также центрировать изображение по вертикали, выполните следующие действия.

• Оберните изображение в элемент div .
• Добавьте классы d-flex и align-items-center в div, т. е.
  .

 Класс d-flex объявляет, что родительский элемент div является гибким контейнером, а класс align-items-center центрирует изображение вертикально внутри элемента div. Это работает аналогично CSS Flexbox.

Вот HTML-код с результатом:

См. Pen Centering Image in Bootstrap от HubSpot (@hubspot) на CodePen.

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

Являются ли изображения встроенными или блочными элементами в HTML?

Как видите, процесс центрирования несложный, но зависит от того, являются ли элементы встроенными или блок .

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

Блочные элементы работают, нарушая поток страницы, тогда как встроенные элементы работают, следуя потоку.

Блочные элементы начинаются с новой строки и занимают всю ширину окна просмотра (или ширину страницы). С другой стороны, встроенные элементы занимают место, отведенное их HTML-тегам, что позволяет им двигаться в «потоке» страницы, а не прерывать его. Конечно, ширина и стиль этих элементов зависят от кода CSS для этого тега HTML.

Вот пример, помогающий визуализировать эти различия.

Ниже вы увидите кнопку Bootstrap, оформленную как встроенный элемент и блочный элемент.

Для встроенной кнопки потребуется специальный код для выравнивания по центру, а для блочной кнопки просто потребуются некоторые корректировки ширины или заполнения.

Тлдр; Блочные и строчные элементы требуют разных методов выравнивания по центру. Например, когда вы центрируете div (который является блочным элементом), вы можете использовать поля и отступы или другие методы.

Однако эти методы нельзя использовать при центрировании изображений.

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

Следует ли центрировать изображения с помощью внутреннего, внешнего или встроенного CSS?

Чтобы центрировать изображение, вам нужно использовать CSS, как мы уже видели. Но у вас есть несколько вариантов: внутренний CSS, внешний CSS или встроенный CSS.

Внутренний CSS размещается в разделе веб-страницы, а внешний CSS располагается во внешней таблице стилей, которая затем связывается в разделе. С другой стороны, встроенный CSS встраивается в HTML-код в разделе. CSS определяется в атрибуте «стиль» целевого элемента.

Как правило, рекомендуется хранить HTML отдельно от CSS, но любой из этих методов даст один и тот же результат. Если по какой-то причине вы не можете их разделить — например, используемая вами платформа для создания веб-сайтов хранит их вместе в редакторе исходного кода — тогда вам придется использовать встроенный CSS.

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

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

Проверьте это ниже:

См. Пример встроенного CSS Pen от HubSpot (@hubspot) на CodePen.

Как это соотносится с внутренним CSS? Допустим, вы хотели использовать тот же CSS, но поместили его в секцию head между тегами