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

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

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

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

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

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

Наиболее правильно, с точки зрения семантики, сделать такую картинку с помощью тега 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 градиентом
  - Тень для текста
  - Эффект отражения
  Как выровнять картинку по центру c другими элементами?
  
  Мне нужно расположить строку поиска (картинку) по середине так, чтобы она не являлась блоком (т.е не переходила на следующую строку). В общем, как это выглядит сейчас: Как нужно чтобы выглядело: HTML:
```
      
 
  
```
```
html, body < margin: 0; padding: 0; font-size: 15px; background: #39c8b0; >* < margin: 0; padding: 0; box-sizing: border-box; >.hat < background: #fff; >.container < width: 1024px; margin: 0 auto; >.container::after < content: ""; width: 100%; display: block; clear: both; >.hat .container .logotype
```
  Отслеживать
  
  7,291 5 5 золотых знаков 27 27 серебряных знаков 69 69 бронзовых знаков
  
  задан 22 мая 2020 в 12:00
  
  177 1 1 серебряный знак 13 13 бронзовых знаков
  
  Как выровнять 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».
```
  
```
  Выравнивание изображения по центру по вертикали
  
  Выше мы обсуждали, как выровнять изображение по горизонтали, но могут быть случаи, когда вам нужно центрировать его по вертикали.
  
  Для этого нам нужно сделать два шага. Оберточный элемент должен отображаться как ячейка таблицы, а выравнивание по вертикали должно быть установлено на середину. В нашем примере мы устанавливаем фиксированную высоту для контейнера, чтобы убедиться, что он выше, чем наша картинка.
```
   
 .verticalcenter 
```
  Одновременное центрирование по горизонтали и по вертикали
  
  Мы можем комбинировать горизонтальное и вертикальное выравнивание, как показано в примере ниже.
```
   
 .verticalhorizontal 
```
  Надеемся, что сегодня, прочитав эту статью, вы узнали что-то новое, и вы будете использовать полученные знания при разработке своих сайтов.
  
  Как выровнять картинку по центру с position: absolute?
  
  rshruslan, position я поставил для того чтобы другие объекты не видели этот объект (так как он в виде заднего фона) и вставали в столбик друг за другом, этот код я для примера дал.
  
  Данил Полянский, я конечно извиняюсь, а разве не проще тогда задать просто фоном?)
  
  Данил Полянский @danil_polyanskiy Автор вопроса
  Тарас Шульга, идея хорошая, но врядли оно будет подходить к моему коду)
  
  Данил Полянский, хмм интересно, я бы хотел увидеть где фоновая картинка чрез абсолют подходит лучше чем свойство которые в принципе для этого было задумано. А так вам писали самый просто вариант бахнуть по центу абсолютно позиционированный элемент — это left/top 50% , transform translate(-50% , -50%)
  Похожие публикации: