Люди, которые занимаются разработкой сайтов с помощью CSS и HTML, как правило, много времени уделяют работе с изображениями.
Нередко веб-разработчики сталкиваются с определёнными трудностями, когда речь заходит о выравнивании картинки по центру.
В этой статье мы рассмотрим несколько рабочих способов, с использованием которых можно установить необходимое расположение картинки на веб-странице.
Выравнивание картинки HTML
В процессе вёрстки веб-страницы изображение HTML нередко отображается не в том месте, где нужно.
В таком случае разработчики сталкиваются с необходимостью центрирования, а именно: как выровнять картинку в HTML по центру.
Для решения поставленной задачи можно воспользоваться несколькими инструментами – о них рассказываем далее.
Центрирование при помощи отступов
Для того чтобы отцентрировать конкретный рисунок, достаточно добавить к нему (к программному запросу «image class») стиль «margin: auto».
Но любому разработчику известно, что код «img» является строковым элементом.
Что делать в подобной ситуации, как выровнять его по центру блока страницы?
Всё предельно просто и понятно. Чтобы получить требуемый результат, нужно сделать его блоковым, использовав стиль «display: block» в CSS.
Центрирование при помощи тега «center»
Следующий метод, который поможет отцентрировать любое фото на веб-странице – это специальный тег «center». Однако сразу стоит отметить, что данный способ является устаревшим и не работает в HTML5.
Раньше этот тег активно использовался программистами, так как для него не нужно было использовать таблицы стилей – можно было ограничиться обычным HTML.
Для его использования достаточно ввести соответствующий код – обязательно вставить в него запрос «отцентрированное изображение».
Центрирование при помощи атрибута «align middle»
Расположить изображение по центру можно ещё одним, «классическим» (но устаревшим) методом – атрибутом «align middle» (вводится в программный код вручную).
В некоторой степени он похож на рассмотренный ранее тег – он не требует применения CSS.
Выравнивание изображения по центру по вертикали
Чтобы поместить изображение в центр по вертикали, необходимо выполнить два действия.
Элемент обёртки нужно отобразить в виде ячейки таблицы, а размещение по вертикали – установить в середину.
При использовании этого метода важно установить фиксированную высоту – это поможет увидеть точное расположение картинки на веб-странице.
Программный код будет иметь ключевой запрос «verticalcenter».
Одновременное центрирование по горизонтали и по вертикали
Любое изображение можно выровнять одновременно по двум направляющим – вертикали и горизонтали.
Сделать это не так сложно – по большей части, мануал не отличается от вертикального выравнивания.
Главное – добавить правильный запрос, а именно – «verticalhorizontal», и система автоматически установит картинку посередине, основываясь на направляющих линиях.
Не стоит также забывать и о свойстве «width» — оно отвечает за ширину объекта.
Горизонтальное центрирование
Разобравшись с основными способами размещения фотографий в центральной части страницы, можно переходить к вопросу, как же сделать так, чтобы выбранная картинка центрировалась по горизонтальной линии.
Итак, разберём несколько инструментов, которые активно используются современными программистами, на доступных примерах.
С помощью flexbox
Добавление инструмента под названием «Flexbox» в значительной степени упростило процесс центрирования любого объекта.
Суть его работы заключается в следующем: Flexbox добавляет элемент, который необходимо расположить в центральной части в специальный контейнер – автоматически ему присваивается запрос «display of flex».
После этого устанавливается наименование «center» — за счёт чего, объект перемещается в центральную зону страницы.
Через автоотступы
Этот метод уже был рассмотрен ранее, поэтому, чтобы не повторяться, расскажем о его одной особенности.
Запрос «margin», как правило, равняется определённой величине для объекта – к примеру, 0 для DIV.
Поэтому важно не забыть установить его.
Также можно задействовать команды «left» и «right» (вместо ранее представленного «auto») непосредственно в структуре запроса – в таком случае он будет определять размеры доступного по бокам пространства.
С помощью inline блоков
Inline-блок представляет собой строчный элемент, содержимое которого доступно для форматирования в виде блока.
Помимо того, что этот блок занимает определённое количество места на веб-странице (которое ему нужно), он также может иметь ту или иную высоту или ширину – это позволяет поставить его в нужное положение, в том числе, по горизонтали.
Это делается посредством выполнения запроса «display: inline-block».
Выравнивание нескольких элементов
Если стоит задача выровнять два и более изображения, то можно воспользоваться тремя основными способами, которые уже были рассмотрены ранее – автоматические отступы, Flexbox и inline-блоки.
Изменение положения элемента на странице будет напрямую зависеть от выбранного инструмента. Так, при использовании авто отступов для каждого элемента (1-ая, 2-ая и прочие картинки) создаётся отдельная строка.
В случае с Flexbox все блоки (будь то изображение или текст) размещаются на одном и том же уровне и имеют идентичную высоту.
Если же для выравнивания используются inline-блоки, то все они помещаются в один и тот же ряд, но, при этом, отличаются друг от друга высотой.
Вертикальное выравнивание
При горизонтальном выравнивании установить ширину главного элемента достаточно просто – если она не имеет чётко заданных значений, то, как правило, она равняется ширине экрана.
В случае с изменением положения по вертикали, работа отличается некоторыми изъянами: высота выровненной картинки должна задаваться посредством свойства «height».
В этом разделе мы подробно поговорим о том, как же правильно разместить тот или иной блок в центральной части веб-страницы относительно вертикальной направляющей.
С помощью flexbox
Для начала необходимо добавить два свойства в родительский элемент – «display: flex» (для автоматической конвертации в flex-контейнер) и «align-items: center».
Последний запрос позволит отцентрировать содержимое в контейнере по вертикальной направляющей.
С помощью свойств position и transform
Данный способ подразумевает применение сразу нескольких свойств, поэтому ему следует уделить особое внимание и разобрать по этапам.
Для главного компонента необходимо установить свойство «position: relative», а для вспомогательного (дочернего) – «position: absolute». Это позволит переместить дочерний элемент по отношению к краю основного – посредством ввода запроса «top:50%».
После выполнения представленного программного кода в центральной части страницы будет находиться «верхушка» блока, а не его середина.
Чтобы откорректировать это, вспомогательный компонент должен быть перемещён вверх на 1/2 высоты – в этом поможет свойство «transform: translate со значениями 0 (изменение положения по горизонтали) и 50 (по вертикали).
Ячейки таблицы
Ячейки таблицы – это ещё один способ выравнивания изображения, который подразумевает добавления в родительский элемент запроса «display: table-cell».
Он позволит трансформировать необходимый блок в табличную ячейку. После этого остаётся лишь ввести свойство «vertical-align: middle», и картинка автоматически переместится в центр по вертикали.
Резюмируя всю информацию, рассмотренную в этом материале, отметим, что основная сложность, которая возникает в процессе центрирования картинки в HTML – это наличие огромного количества доступных подходов.
В силу того, что каждый из них отличается своими особенностями и ограничениями, следует тщательно разобраться в их применении.
Об этом мы, как раз, постарались подробно рассказать в статье.
