Как сделать фото по центру css
Перейти к содержимому

Как сделать фото по центру css

  • автор:

Как выровнять HTML изображение по центру

Как выровнять HTML изображение по центру

Позиционирование и выравнивание изображений на странице HTML имеет решающее значение для макета страницы. Один из наиболее распространенных вопросов — как выровнять изображение по центру определенной секции. В этой статье мы обсудим множество возможных способов размещения изображений в центре заданной области.

В примерах данной статьи, чтобы сделать видимой границу оберточных элементов, мы сделаем их серого цвета. Итак, приступим.

Центрирование в параграфе

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

изображение в центре параграфа

  

изображение в центре параграфа

.aligncenter

Здесь всю работу делает CSS свойство text-align: center;. Если вы знаете код CSS, то вам ничего не нужно объяснять.

Центрирование при помощи отступов

Чтобы отцентрировать блоковый элемент, достаточно применить к нему стиль margin: auto;. Но известно, что тег img – это строковый элемент. Как же быть? Все очень просто. Чтобы все заработало, нужно сделать его блоковым применив CSS стиль display: block;.

отцентрированное изображение

  
отцентрированное изображение
.marginauto

Центрирование при помощи тега

Следует помнить, что тег является устаревшим и не поддерживается в HTML5. Однако он все еще распознается веб-браузерами вроде Google Chrome.

Раньше это был предпочтительный метод, потому что он не требовал таблиц стилей, а только простой HTML.

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

  
отцентрированное изображение

Центрирование при помощи атрибута align=middle

Еще один устаревший метод, который не требует использования CSS, похожий на предыдущий пример. В более старых версиях HTML мы могли центрировать изображение, устанавливая атрибут тега align=»middle».

  отцентрированное изображение

Выравнивание изображения по центру по вертикали

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

Для этого нам нужно сделать два шага. Оберточный элемент должен отображаться как ячейка таблицы, а выравнивание по вертикали должно быть установлено на середину. В нашем примере мы устанавливаем фиксированную высоту для контейнера, чтобы убедиться, что он выше, чем наша картинка.

html изображение

  
отцентрированное изображение
.verticalcenter

Одновременное центрирование по горизонтали и по вертикали

Мы можем комбинировать горизонтальное и вертикальное выравнивание, как показано в примере ниже.

пример изображения

  
отцентрированное изображение
.verticalhorizontal

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

Центрирование картинки в блоке

Подобные задачи часто приходится решать при верстке каких-нибудь каталогов или других списков продукции.

примеры каталогов

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

Традиционное решение

Наиболее правильно, с точки зрения семантики, сделать такую картинку с помощью тега img и центрировать его, как рассказывается в статье Вертикальное выравнивание по центру.

Метод действенный, но достаточно тяжелый — требуется expression для IE6-7, накладывается ряд ограничений на родителя и сам выравниваемый элемент (см. заметки в статье «Вертикальное выравнивание по центру»).

Другой вариант

Все можно реализовать намного проще, если отказаться от тега img и положить картинку в background. Воспользуемся установкой позиционирования «center center»:

Заметка

Если требуется, фоновое изображение для удобства можно вынести в HTML — это позволит программно сформировать блок с картинками:

Плюсы:

  • Снимает ограничения с родителей элемента (теперь они не обязаны не быть плавающим или с абсолютным/фиксированным позиционированием — а значит в некоторых случаях отпадает необходимость в лишнем контейнере);
  • не нужны expression для IE6-7;
  • не нужен родитель с overflow:hidden для обрезки больших рисунков;
  • код более компактный, понятный.

Минус:

  • Пострадала семантика — ведь картинку, если строго следовать принципам семантической верстки, все же надо было делать тегом img. Картинки, находящиеся в фоне не проиндексируются поисковиком, а значит будет хуже SEO;
  • Вопрос производительности остается открытым, т.к. ни в HTML, ни в CSS картинке не задан размер.

Вывод

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

  • CSS приемы
    • «Дергание» сайта
    • background position со смещением
    • clearfix
    • CSS прозрачность
    • CSS хаки
    • RGBA — CSS полупрозрачность
    • Затемнение фона
    • Кроссбраузерный

    • Обнуление отступов
    • Порядок описания ссылок
    • Прелоад изображений
    • Сброс стилей
    • Сокращения в CSS
    • Убираем рамку с эл-ов в фокусе
    • Условные CSS
    • Условные комментарии
    • Поворот вокруг своей оси
    • Поворот объекта вокруг свой
    • Resize для textarea в Safari и Chrome
    • Блочная верстка форм
    • Кастомные checkbox и radio на CSS
    • Кросбраузерные input и textarea
    • Кроссбраузерный button
    • Нестандартные checkbox
    • Нестандартные radio
    • Нестандартные select
    • Нестандартные select multiple
    • Нестандартные поля выбора файла
    • Нестандартные текстовые поля
    • О кроссбраузерности placeholder
    • Отступы у checkbox и radio
    • Оформление input type=search
    • Резиновая кнопка
    • Текст в поле type=»password»
    • Блоки равной высоты в строке
    • Колонки равной высоты
    • Прижимаем подвал к низу
    • Ресайз окна: потомок перерос родителя
    • Сайт в центре экрана
    • Фиксированная колонка + резиновая + clear:both
    • CSS 3D лента
    • CSS3 всплывающие подсказки
    • IMG внутри блока — убираем странный отступ
    • IMG: меняем рисунок при наведении
    • Аккордеон на чистом CSS3
    • Валидный target=»_blank»
    • Верстка рейтингов
    • Верстка содержания
    • Вставка спецсимволов в генерируемый контент
    • Вставка стрелок
    • Индивидуальные стили для li. Избавляемся от классов.
    • Масштабируемая картинка в резиновой колонке
    • Многоколоночный текст на CSS3
    • Нестандартное подчеркивание
    • Отменяем обтекание текстом картинки
    • Оформление внешних ссылок
    • Оформление изображений по align
    • Оформляем «ol»
    • Правильные анонсы новостей
    • Список определений. Требуем невозможного.
    • Firefox
      • -moz-box-shadow и -moz-border-radius — это кошмар CPU
      • Позиционирование внутри button
      • Ширина input type=file
      • Onload в IE9
      • z-index в IE6-7
      • Баг с текстом при применении Alpha фильтра
      • Масштабирование и PIE
      • Отступы в кнопках в IE6-7
      • Проблемы с em
      • Эмуляция after и before для IE 6-7
      • Эмуляция data:URL для IE6-7 — используем MHTML-включение
      • hasLayout
      • Max-width
      • Min-height
      • Min-width
      • Min-width и max-width одновременно
      • PNG и прозрачность
      • Высота блока 1px
      • Дублирование символов
      • Дырка под футером
      • Как перекрыть select
      • Обрезка контента c отрицательным margin в IE6
      • Отступы плавающих блоков
      • Проблемы с размерами блоков
      • Псевдокласс :first-child
      • Псевдокласс hover в IE 6
      • Селектор потомков >
      • Селекторы атрибутов [type=…]
      • Сестринский селектор
      • Смещение на 1px
      • Ссылки с вложением
      • Устраняем flickering
      • Эмуляция position:fixed
      • overflow-y
      • Не подгружаются шрифты @font-face
      • Проблема с oveflow: hidden
      • Скругление img
      • HTML шаблон для мобильных устройств
      • Выпадающее меню на CSS
      • Выравнивание навигации из блоков по центру
      • Выравнивание навигации по середине
      • Резиновое меню
      • Резиновое меню из блоков
      • Убираем класс для первого элемента
      • Box-sizing: переключаем блочную модель
      • inline-block: простое свойство для непростых задач
      • Вертикальная позиция для строчного элемента
      • Вертикальное выравнивание
      • Выравнивание по центру с position: absolute
      • Вычисляемые отступы
      • Два в одном: позиция + размеры
      • Долой отступы между строчными элементами (и блоками)
      • Обходим схлопывание margin
      • Центрирование картинки в блоке
      • Центрирование резинового блока по горизонтали
      • Активация flash
      • Вставка flash в HTML
      • Вставляем ролик с YouTube
      • Как отключить flash
      • Как перекрыть flash
      • Параметры для вставки объектов
      • Ссылка на flash объекте
      • CSS треугольники
      • Аппаратное ускорение анимации
      • Встраиваем изображения — data:URL
      • Градиент: CSS3 против CSS2 + картинка
      • Лесенка спрайтов — сложный случай поклейки
      • На одну картинку меньше. Спецсимвол ×
      • Необычные тени с CSS3 box-shadow
      • Оптимизация Google Web Fonts
      • Оптимизация фонов с помощью Canvas
      • Проблемы с border-radius
      • Псевдоэлемент before для маркера списка
      • Скругление углов. Обзор методов.
      • Сокращаем HTML5 код
      • Спрайты: меньше картинок — больше скорость
      • Тень для блока
      • Фигуры с углами на CSS
      • Шаблоны градиентов
      • Дополнение Skype
      • Подключить favicon
      • Профилактика сайта: максимально простое оповещение
      • Ссылки на skype
      • @font-face в деталях
      • Cufon — нестандартный шрифт средствами JS
      • font-size: 100.01% для html
      • Безопасные шрифтовые CSS стеки для англоязычных текстов
      • Безопасные шрифтовые CSS стеки для рунета
      • Безопасные шрифты
      • Вертикальный текст
      • Используем псевдоэлемент :first-letter
      • Контур для текста
      • Нестандарный шрифт. Быть ему или нет?
      • Нестандартный шрифт средствами CSS
      • Плавающий :first-letter
      • Подмена текста изображением
      • Соответствия шрифтов Windows, Mac и Unix/Linux
      • Строчный :first-letter
      • Текст под углом
      • Текст с CSS градиентом
      • Тень для текста
      • Эффект отражения

      Как выровнять фотографию по центру веб-страницы?

      Выровнять фотографию с подписью по центру горизонтали веб-страницы.

      Решение

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

      Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору P следует добавить стилевое свойство text-align со значением center . При этом тег должен располагаться внутри абзаца (тег

      ). Чтобы не получилось так, что все абзацы на странице начали выравниваться по центру, введем свой класс fig , и все действия будем производить с ним. В примере 1 показано, как это сделать.

      Пример 1. Использование text-align

      HTML5 CSS 2.1 IE Cr Op Sa Fx

          Выравнивание фотографии по центру   

      Текст до изображения

      Текст после изображения

      Результат данного примера продемонстрирован на рис. 1.

      Изображение, выровненное по центру веб-страницы

      Рис. 1. Изображение, выровненное по центру веб-страницы

      Также к фотографии можно добавить подрисуночную подпись. Текст должен располагаться сразу же после изображения и аналогично ему выравниваться по центру. Здесь всё просто, опять воспользуемся нашим классом, но уже применим его к тегу . Чтобы текст подписи отличался по своему виду от обычных абзацев, сделаем его курсивным и выделим другим цветом (пример 2).

      Пример 2. Подрисуночная подпись

      HTML5 CSS 2.1 IE Cr Op Sa Fx

          Фотография с подписью  
      
      
      

Иллюстрация: Оля Ежак для Skillbox Media

Иван Стуков

Иван Стуков
Журналист, изучает Python. Любит разбираться в мелочах, общаться с людьми и понимать их.

CSS существует и развивается с 1996 года. За четверть века и три редакции в этом языке появилось много разных способов отцентрировать элемент — как костыльных, так и каноничных.

В статье мы расскажем об основных приёмах для выравнивания по центру в CSS. Какой из них более удобен и приятен — решать вам.

  • С помощью Flexbox
  • Через автоотступы
  • С помощью inline-блоков
  • Выравнивание нескольких элементов
  • С помощью Flexbox
  • С помощью свойств position и transform
  • Ячейки таблицы
  • С помощью Flexbox
  • С помощью свойств position и transform
  • Через CSS Grid
  • Центрирование текста по горизонтали
  • Центрирование текста по вертикали
  • Как выровнять заголовок, список или форму
  • Как центрировать блок
  • Как разместить блок посередине страницы
  • Выравнивание картинок и кнопок по центру

Горизонтальное центрирование

Как работают способы из этого раздела, мы покажем на примере блоков div, однако применять их можно и к другим элементам: заголовкам, абзацам, изображениям, кнопкам, формам, спискам и так далее.

Для наглядности мы добавим границы блоков: синие для родительских и чёрные для дочерних.

С помощью Flexbox

Добавьте в родительский элемент свойства display: flex, чтобы сделать элемент flex-контейнером, и justify-content: center, чтобы контент внутри контейнера расположился посередине горизонтальной оси. Обратите внимание: justify-content действует только на flex-элементы, поэтому без display: flex он не заработает.

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

Через автоотступы

Добавьте свойства margin-left: auto и margin-right: auto — они устанавливают автоматические отступы слева и справа. И укажите ширину с помощью width:

Преимущество метода состоит в том, что не нужно явно прописывать свойства родительского элемента (в нашем случае это body).

Две строки с автоотступами можно заменить на одну: margin: 0 auto или margin: auto. В обоих случаях результат будет одинаковым.

С помощью inline-блоков

Проще всего выравнивать текст по горизонтали. Для этого существует свойство text-align: center, которое применяется к родительскому элементу.

Несмотря на своё название, text-align можно применять не только к тексту. Для этого нужно сделать элементы, которые хотите выровнять, встроенными — с помощью display: inline-block.

В этом методе так же, как и в первом, размеры блока подстраиваются под содержимое. Но при желании можно явно задать ширину и высоту.

Выравнивание нескольких элементов

Каждый из трёх способов будет вести себя по-разному, если мы будем размещать по центру сразу несколько элементов. Возьмём один и тот же HTML-код и последовательно применим к нему описанные выше методы:

С автоотступами каждый блочный элемент помещается в отдельную строку:

Инлайн-блоки остаются в одном ряду, но у них будет разная высота (у каждого — по размеру контента). Плюс текст в них автоматически выравнивается по центру.

Вертикальное центрирование

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

Как и в прошлом разделе, мы будем показывать работу всех методов на примере блоков div и добавим те же границы: синие — для родительских и чёрные — для дочерних элементов. Во всех примерах будем использовать один и тот же HTML-код:

С помощью свойств position и transform

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

Родительскому элементу нужно присвоить свойство position: relative, а дочернему — position: absolute. Благодаря этому мы сможем сдвинуть дочерний блок относительно верхнего края родительского, используя свойство top: 50%.

Обратите внимание, что сейчас по центру расположена не середина блока с текстом, а его верхняя граница. Чтобы исправить это, дочерний элемент нужно сдвинуть на половину его высоты вверх. Делается это свойством transform: translate (0, -50%). Первое число означает смещение по горизонтали, второе — по вертикали.

Если по какой-то причине вы не хотите использовать свойство transform, вместо него можно поставить margin. Но для этого необходимо знать размер дочернего элемента и установить отрицательный margin-top, равный половине его высоты.

Ячейки таблицы

Добавьте в родительский элемент display: table-cell, чтобы блок вёл себя как ячейка таблицы, и vertical-align: middle — это свойство центрирует содержимое блока по вертикали.

Это довольно костыльный и не очень удобный способ. Так как ячейка находится вне таблицы, мы не можем корректно управлять её шириной. Для этого нужно создать родительский элемент со свойством display: table и задавать width уже внутри него.

Выравнивание по центру

Чтобы поместить элемент по центру родительского блока (то есть выровнять одновременно по горизонтали и вертикали), иногда достаточно объединить под одним селектором методы горизонтального и вертикального центрирования.

Во всех примерах мы будем использовать один и тот же HTML-код и получать один и тот же результат.

С помощью Flexbox

Чтобы центрировать элемент с помощью Flexbox, достаточно объединить горизонтальный и вертикальный способы:

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

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

Центрирование текста по вертикали

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

Flexbox. В этом случае нужно задать стили только для родительского элемента, а для дочернего CSS-кода можно не писать.

Позиционирование. Если применить к элементу свойства position и transform, позиционирование будет работать некорректно из-за того, что по умолчанию у него есть отступы. Решить это можно двумя путями.

Первый (рекомендуемый) — убрать из абзаца отступ свойством margin: 0.

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

Как выровнять заголовок, список или форму

К заголовкам, спискам и формам применяются все те же способы позиционирования по центру, что и к обычному тексту: как по горизонтали, так и по вертикали.

Единственная особенность списков — их родителю не стоит присваивать свойство text-align: center. Выглядеть это будет плохо, можете убедиться в этом на следующем примере.

Как центрировать блок

Когда мы рассказывали о способах выравнивания элементов, приводили примеры именно на блоках. Поэтому, если вы ищете ответ на этот вопрос, перейдите в один из предыдущих разделов:

  • Горизонтальное центрирование
  • Вертикальное центрирование
  • Выравнивание по центру

Как разместить блок посередине страницы

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

  • в качестве родительского элемента выступает всё тело веб-страницы (элемент );
  • необязательно явно указывать высоту блока.

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

Flexbox. Недостаток этого подхода в том, что такая страница будет выравнивать по центру все элементы внутри себя, а не только те, которые нам нужны.

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

  • задана высота родительского блока;
  • не заданы размеры картинки;
  • не указано свойство align-items.

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

В остальных случаях флексбоксы будут работать так же, как и с блочными элементами.

Резюмируем

Основная сложность при выравнивании элементов веб-страницы по центру — обилие подходов, у каждого из которых свои тонкости и ограничения:

  • Flexbox удобен для любого вида выравнивания. При таком подходе необходимо задавать стили только родительскому элементу.
  • Позиционирование можно использовать для выравнивания по вертикали и размещения элемента по центру блока (выравнивания по вертикали и горизонтали одновременно).
  • Автоотступы и inline-блоки удобно использовать для горизонтального выравнивания, ячейки таблицы — для вертикального, Grid — для размещения элемента по центру родительского блока.

Больше интересного про код в нашем телеграм-канале. Подписывайтесь!

Читайте также:

  • Селекторы в CSS: что это такое, как они работают и какие бывают
  • Заняться фронтенд-разработкой в 12 лет, выиграть IT‑чемпионат в 13: история Али Сулейманова
  • Учимся верстать: что такое CSS

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

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