Как сделать картинку по центру в html без css

Картинка по центру html без css

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

Навигация по статье:

Я покажу вам несколько способов выравнивания картинки по центру html и css , которые вы сможете использовать в зависимости от ситуации.

Выравнивание картинки HTML

Кода вы верстаете страницу, и в каком-то единичном случае вы заранее знаете, что данное изображение должно быть по центру блока, то вы можете сделать выравнивания картинки по центру в html коде, обернув картинку в тег

уроки front-end и back-end

Рубрики

Как выровнять картинки по центру?

Итак, как и любой начинающий верстальщик, вы сталкивались с проблемой: как выровнять картинки по центру веб-страницы? И тут идут разные ухищрения вроде использования тега center, который настолько устарел, что и говорить уже о нем не нужно.

Я предлагаю три способа решения, которые наиболее часто используются в HTML и CSS.

Способ 1

Наиболее простой способ – это присвоить картинке класс, а затем, с помощью CSS сделать картинку блоком, после чего задать ей автоматическое выравнивание с правой и левой части.

Вступление

Люблю решать интересные задачи по верстке, а с учетом моего опыта в этой сфере, чуть больше 5 лет, такие задачи попадаются не часто.
Недавно столкнулся сразу с несколькими такими задачами:

1. Центрирование изображения по центру страницы с сжатием его при ресайзе браузера.
2. Абсолютное центрирование изображение вне зависимости от размера окна браузера.

В принципе и первая и вторая задача решаема с помощью маленького javascript но мне хотелось сделать это по уму через html+css.
Еще задача облегчалась тем, что сайт, на котором это будет использоваться, разрабатывался современным, и поддержка ограничивалась ie9+, FF, Chrome, Safary, Opera.

А теперь приступил непосредственно к решению задач.

1. Центрирование изображения по центру страницы с сжатием его при ресайзе браузера

За основу метода я использовал хак с центрированием блока через псевдоелемент, inline-block структуру и vertical-align:

Способ вроде старый, думаю описывать как, что и зачем тут работает не нужно. Если мне не изменяет память я даже видел на хабре что то подобное, только с использованием лишнего блока, роль которого в моём примере исполняет :arter.

Немного преобразовав этот способ у меня вышло такое:

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

2. Абсолютное центрирование изображение вне зависимости от размера окна браузера.

А вот с этим пришлось повозиться. Изначальная идея была такая:

Идея строилась та такой логике:

  • Внешний блок, .wrapper, растянутый на всю свободную ширину и высоту.
  • Внутренний блок, .item, принимает ширину и высоту у картинки, которая расположена внутри, так как он inline-block; и выставляется верхним левым углом в центр родительского блока.
  • Вынос картинки в минусовой margin, который как раз должен был её выровнять точно по центру .wrapper

Но вполне логичную идею ворвалась еще более логичная зависимость. 50% отступ высчитывается на основании половины высоты или ширины родителя. В моём случае ширина и высота родителя строились на ширине и высоте картинке, а после того как картинка сдвигалась в -50% то и родитель, .item, уменьшался на эти же 50% и круг замыкался.

Решил я это вспомнив об transform, а точней об его функции translate, которая как бы сдвигает отображение объекта, но оставляет место где он был. И получилось что заменив margin картинки на transform: translate(-50%, -50%); задача сразу решается. И вот что вышло в конце:

ЗЫ: Я не уверен единственные ли это варианты или нет. Думаю не всем эти варианты подойдут.
Но я точно знаю, что если они подошли в моём случае, то найдутся люди которых они возможно очень выручат в ихних задачах. К тому же если чуть чуть дополнить код можно добавить костыли и для более старых IE, я не добавлял так как не хотел ради очень устаревших браузеров портить чистый код.
ЗЫ2: Критика и советы очень приветствуются. Спасибо что дочитали до конца.

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

Ссылаемое изображение по центру экрана

Как, при помощи команд HTML или SCC, разместить ссылаемое изображение (имею ввиду не изображение-ссылку, а изображение на которое ссылается ссылка-изображение) по центру основного окна браузера? В Firefox по умолчанию оно размещается по центру, а в других брузерах — с левой стороны!

Вот ссылка на страницу перед нажатием на ссылку-изображение — http://www.sfgkolos.com/rebro.html

Ссылка на комментарий
Поделиться на других сайтах

5 ответов на этот вопрос

  • Сортировать по голосам
  • Сортировать по дате

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

Похожие публикации

Ребята, без вас никуда!
Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide.
Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css — не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства?

HTML & CSS: как не надо

Не задавайте контейнерам ширину, равную брикпойнтам

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

Как это увидеть? #

Допустим, есть макет для страницы шириной 600px, контент должен занимать всю ширину. Зададим соответствующий код:

И посмотрим в браузере что получилось. Начнём с мобильных:

Контейнер с фиксированной шириной на мобильных

На мобильных всё как надо. Десктоп:

Контейнер с фиксированной шириной на десктопе

На десктопе появилась не только вертикальная прокрутка, но и горизонтальная. Почему?

body содержащий контейнер с фиксированной шириной на десктопе

Потому что вертикальная прокрутка отъела часть ширины окна, и для контента осталось меньше места.

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

Есть несколько вариантов решений, в зависимости от того, что требуется сделать, и свободного времени на это.

Вариант с фиксированной колонкой

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

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

Простое и быстрое решение.

Если всё же нужно ограничить ширину колонки вместе с полями внутри, вместо width используйте max-width :

Так колонка не растянется шире заданного значения, а если места окажется недостаточно — сожмётся.

Вариант с резиновой колонкой

Чтобы на узких экранах конент не болтался узкой полосой, а занимал всю доступную ширину, можно сделать иначе: никак не ограничивать ширину контейнера (и он растянется на всю ширину body ), но задать боковые margin или padding .

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

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

Минус способа в том, что в этом случае также надо будет предусмотреть резиновое поведение содержимого, чтобы оно не сбивалось в кучу или не размазывалось по странице. Если на это нет времени, просто используйте способ с фиксированной колонкой.

Вариант с фоном на всю ширину страницы

Например, в макете требуется что-то такое:

Пример с фоном ширину страницы

У шапки фон по ширине страницы, содержимое по центру.

На самом деле, вариант почти ничем не отличается от предыдущих. В случае с резиновой колонкой и паддингами, можно задать фон самой колонке, потому что она и так растянута на ширину страницы. В остальных случаях снаружи контейнера нужно просто задать обёртку, которой и будет задан фон.

Обёртка с фоном не будет ограничиваться по ширине и всегда будет растягиваться по ширине body не вызывая появление прокрутки. При этом содержимое внутри неё будет придерживаться заданной ширины в зависимости от выбранного способа.

Вариант с картинкой на всю ширину страницы

Иногда нужно, чтобы тянулась не вся колонка, а часть содержимого, например, картинка в статье:

Пример с картинкой на ширину страницы

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

Если нужно, чтобы картинка растягивалась и сжималась вместе с контентом, достаточно будет кода для картинки:

Но если требуется, чтобы размеры картинки не менялись, а всё, что не поместилось по ширине, просто обрезалось, тогда картинке нужна обёртка:

Теперь центрируется обёртка, и она же отвечает за выравнивание картинки по центру:

На мобильных всё будет работать как задумано, но если открыть на десктопе, обнаружится горизонтальная прокрутка:

Пример с картинкой на ширину страницы с горизонтальной прокруткой на десктопе

Потому что 100vw — это не ширина body , а вся ширина окна вместе с прокруткой, то есть элемент такой ширины на странице не поместится, что и вызовет появление горизонтальной прокрутки.

Чтобы решить эту проблему, ближайшему родителю широкой картинки, растянутому на всю ширину страницы, задайте overflow: hidden .

Пример с картинкой на ширину страницы без горизонтальной прокрутки

Горизонтальная прокрутка пропала, всё работает как надо.

Итого

Не задавайте контейнерам ширину, равную брикпойнтам, это может вызвать появление горизонтальной прокрутки в десктопных браузерах. Задавайте меньшую ширину или используйте паддинги/марджины для контейнеров с нефиксированной шириной.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *