Как выровнять картинку в css
Перейти к содержимому

Как выровнять картинку в 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 градиентом
      • Тень для текста
      • Эффект отражения

      Выравнивание изображения

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

      Есть множество вариантов выравнивания картинок относительно текста, и за все отвечает атрибут align элемента IMG. Он позволяет выравнивать изображения с правой, с левой стороны окна или относительно элементов строки.

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

      • left – по левому краю;

      • right – по правому краю.

      • top – выравнивание верхней границы картинки по самому высокому элементу строки;

      • texttop – выравнивание верхней границы картинки по самому высокому элементу текста;

      • middle – середина изображения выравнивается по базовой линии строки;

      • absmiddle – середина изображения выравнивается по середине строки;

      • baseline – выравнивание нижней границы изображения по базовой линии строки;

      • bottom – аналогично baseline;

      • absbottom – нижняя граница изображения выравнивается по нижней границе текущей строки.

      Примечание

      Базовая линия строки – это линия, на которой расположены все элементы. При этом некоторые буквы выступают за эту линию, например буква «р». Ее палочка заканчивается ниже базовой линии и будет самым нижним элементом строки. Заглавные буквы, наоборот, выступают сверху этой линии.

      В листинге 4.3 приведены примеры выравнивания картинок относительно текста по вертикали.

      Листинг 4.3. Выравнивание картинки по вертикали

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

      Нижняя граница изображения выравнивается по нижней границе текущей строки

      Нижняя граница изображения выравнивается по базовой линии строки

      Середина изображения выравнивается по базовой линии строки

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

      Рис. 4.3. Выравнивание по вертикали

      С выравниваниями по горизонтали все проще. Код для выравнивания по горизонтали приведен в листинге 4.4.

      Листинг 4.4. Выравнивание картинки по горизонтали

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

      На рис. 4.4 виден результат обработки браузером кода из листинга 4.4, текст обтекает картинку слева.

      Рис. 4.4. Выравнивание по горизонтали

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

      Данный текст является ознакомительным фрагментом.

      Продолжение на ЛитРес

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

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

      Выравнивание текста Выравнивание текста задается с помощью свойства text-align, значения которого такие же, как и значения свойства align у элемента P. Следующие значения указывают, что текст будет выровнен:• left – по левому краю;• right – по правому краю;• center – по центру;• justify –

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

      Вертикальное выравнивание Свойство vertical-align каждой ячейки таблицы определяет вертикальное выравнивание ее содержимого. Содержимое каждой ячейки имеет базовую линию, верх, середину и низ. В контексте таблиц свойство vertical-align может принимать следующие значения.• baseline –

      7.5.2. Выравнивание памяти

      7.5.2. Выравнивание памяти Хотя инструмент Electric Fence очень помог в обнаружении второй проблемы в коде, а именно — вызова strcpy(), переполнившего буфер, первое переполнение буфера найдено не было.Проблему в этом случае нужно решать с помощью выравнивания памяти. Большинство

      13.2.1. Выравнивание по страницам

      13.2.1. Выравнивание по страницам Системная память делится на порции под названием страницы. Размер страницы изменяется в зависимости от архитектуры, и на некоторых процессорах размер страницы может изменяться ядром. Функция getpagesize() возвращает размер (в байтах) каждой

      Выравнивание и распределение

      Выравнивание и распределение Когда активен инструмент Перемещение, на панели под строкой меню появляется набор кнопок для выравнивания и распределения изображений и объектов (рис. 9.1). Рис. 9.1. Кнопки выравниванияПиктограммы на кнопках подсказывают, как будут

      Выравнивание объектов

      Выравнивание объектов Команда ALIGN осуществляет выравнивание объектов относительно других объектов в двумерном и трехмерном пространстве. Вызывается команда из падающего меню Modify ? 3D Operations ? Align.Запросы команды ALIGN: Select objects: – выбрать объекты Select objects: – нажать клавишу

      Выравнивание и распределение

      Выравнивание и распределение В тех случаях, когда необходимо расположить объекты с высокой точностью по отношению друг к другу (например, ровно в ряд на равном расстоянии), но точность расположения на странице не требуется, мы можем прибегнуть к процедурам выравнивания и

      Выравнивание

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

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

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

      Выравнивание объектов

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

      Выравнивание

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

      Выравнивание объектов

      Выравнивание объектов Команда ALIGN осуществляет выравнивание объектов относительно других объектов в двумерном и трехмерном пространстве. Вызывается команда из падающего меню Modify3D Operations ? Align.Запросы команды ALIGN:Select objects: – выбрать объектыSelect objects: – нажать клавишу Enter

      Выравнивание данных

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

      Выравнивание объектов

      Выравнивание объектов Команда ALIGN осуществляет выравнивание объектов относительно других объектов в двумерном и трехмерном пространстве. Вызывается команда из падающего меню Modify ? 3D Operations ? Align.Запросы команды

      Выравнивание

      Выравнивание К нескольким выделенным, но не сгруппированным объектам можно также применять операцию автоматического выравнивания (имеется в виду пространственное положение объектов в кадре). Для его применения следует нажать кнопку на нижней панели инструментов или

      Как выровнять изображения и текст во горизонтали/по центру?

      460ae73cd4bc4967b7c84b74c202c156.png

      Добрый день.
      Сразу скажу что решение искал, html book читал но не понимаю как реализовать.
      Задача отцентрировать по горизонтали и по центру 4 картинки и по 2 надписи к ним. (Пример как на рисунке)
      Есть код HTML:

       

      Текст 1

      Текст 2

      Текст 1

      Текст 2

      Текст 1

      Текст 2

      Текст 1

      Текст 2

      У меня проблема здесь — код CSS:

      .counter < display: inline-block; position: absolute; left: 25%; background: #9dceb4; white-space: nowrap; text-align: center; >.counter img < display: inline-block; margin: 5px; width: 200px; white-space: nowrap; >.counter p

      Что неправильно я делаю?
      Дайте рекомендации, не могу реализовать.
      Выравнивается все по вертикали а не по горизонтали.

      • Вопрос задан более трёх лет назад
      • 5226 просмотров

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

      Итак, у нас есть картинка и есть блок div. Как выровнять картинку по вертикали?

      1. Нам не известны ни размеры картинки, ни размеры блока

      Вариант 1. Картинка с абсолютным позиционированием

      1 2 3
      1 2 3 4 5 6 7 8 9 10 11 12
      .outer { height: 100px; position: relative; } .outer img { position: absolute; margin: auto; left: 0; top: 0; bottom: 0; right: 0; }

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

      Пример:

      Вариант 2. Через table-cell

      Верстка как и в первом примере:

      1 2 3
      1 2 3 4 5 6 7
      .outer1 { display: table-cell; vertical-align: middle; text-align: center; width: 500px; height: 100px; }

      Здесь тоже высота может быть динамической. Но есть одно НО – ширину блока уже нельзя указать в 100%, должен быть задан width.

      Пример:

      2. Нам известна высота блока, но не известна высота картинки

      Способ через line-height. Высота картинки должна быть меньше высоты блока.

      1 2 3
      1 2 3 4 5 6 7 8
      .outer2 { height: 100px; line-height: 100px; text-align: center; } .outer2 img { vertical-align: middle; }
      Пример:

      Нам известна высота картинки, но неизвестна высота блока

      Способ через абсолютное позиционирование картинки

      Суть этого способа заключается в добавлении картинке position: absolute, отодвигании ее сверху на 50% через свойство top, а потом добавлении отрицательного margin, равного половине высоты этой картинки. Также можно выравнивать картинку и по горизонтали (добавлением свойств top: 50% и margin-top, равного половине ширины картинки).
      Верстка:

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

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