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

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

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

Для выравнивания изображения по центру в css используются свойства:

1. display(вид визуального отображения). По умолчанию границы элемента картинки равны размерам(ширина, высота) и это свойство не позволяет ее отображать по центру. Поэтому для начала необходимо превратить картинку в блочный элемент, который будет занимать всю ширину родительского блока, при сохранении размеров изображения. Это позволит отобразить изображение по центру его же блока. Для задания картинке свойства блочного элемента, занимающего всю ширину, используется свойство display: block .

2. margin(внешние отступы). У свойства margin: y1 x1 y2 x2 , значения y1 x1 y2 x2 отвечают за отступ сверху, справа, снизу и слева соответственно. Если вместо отступов x1 и x2 написать auto в css, то будет выравнивание картинки по центру относительно горизонтальной плоскости.

Пример кода как выровнять картинку по центру

Результат в браузере

Код страницы





Тестовая страница







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

Часто возникают случаи, когда нужно выравнивание нескольких картинок по центру в css, для этих случаев удобно использовать родительский слой div , внутри которого будут изображения. Сам родительский слой div нужен, чтобы расположить изображения по центру.

Выравнивание нескольких изображений по центру в css делается с помощью размещения всех картинок внутри родительского тега , который по умолчанию уже является блочными элементом, т. е. растянут на всю ширину. Но у тега по умолчанию строчное выравнивание по левому краю, поэтому нужно установить свойству text-align значение «center», тогда все его содержание будет выровнено по центру. Должно получиться примерно так: ...тут картинки... .

Дополнительно у каждого изображения можно задать отступы, чтобы они не слипались друг с другом, а находились на некотором расстоянии между собой. Отступы делаются, через то же свойство margin , рассмотренное выше. У margin: y1 x1 y2 x2 , цифры в пикселях y1 x1 y2 x2 отвечают за отступ сверху, справа, снизу и слева соответственно.

Пример как выровнять 3 изображения по центру в css

Результат в браузере

Д ля вставки изображений в HTML применяются два основных формата GIF и JPEG. Формат GIF может хранить внутри себя простейшую анимацию (динамические баннеры), JPEG отлично подходит для изображений с большим количеством цветов, например фотографий. Третьим форматом для web-графики является формат PNG, но он не получил широкого применения в web-дизайне. Любое изображение в форматах GIF или JPEG вставляется на web-страницу при помощи тега , закрывающего тега нет.

Атрибут SRC

Посредством атрибута src задается адрес (URL) файла с изображением, т.е. браузер находит нужное изображение в каталоге сайта по пути (адресу URL), прописанному в этом атрибуте. Для удобства все изображения сайта находятся в отдельной папке, обычно с именем image . Для примера возьми любое изображение, лучше небольшого формата, и сохрани в созданной папке image, с именем primer.jpg . Далее мы будем обращаться к ней для обучения.

Ну что, попробуем вставить картинку на страницу? Пишем код (путь - URL, прописывается в зависимости от местонахождения папки с изображениями):

src="image/primer.jpg" >

То, без чего не создать сайт: ∼ ∼

Песочница

Возле ректора 11 октября 2013 в 17:17 Центрирование изображений на странице
  • CSS ,
  • HTML
Вступление Люблю решать интересные задачи по верстке, а с учетом моего опыта в этой сфере, чуть больше 5 лет, такие задачи попадаются не часто.
Недавно столкнулся сразу с несколькими такими задачами:1. Центрирование изображения по центру страницы с сжатием его при ресайзе браузера. В принципе и первая и вторая задача решаема с помощью маленького javascript но мне хотелось сделать это по уму через html+css.
Еще задача облегчалась тем, что сайт, на котором это будет использоваться, разрабатывался современным, и поддержка ограничивалась ie9+, FF, Chrome, Safary, Opera. 2. Абсолютное центрирование изображение вне зависимости от размера окна браузера. А вот с этим пришлось повозиться. Изначальная идея была такая:


.wrapper{ overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .item{ position: absolute; top: 50%; left: 50%; display: inline-block; } .item img{ margin: -50% 0 0 -50%; }

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

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

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


*{ padding: 0; margin: 0; vertical-align: top; } html, body{ width: 100%; height: 100%; } .wrapper{ overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .item{ position: absolute; top: 50%; left: 50%; display: inline-block; } .item img{ -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

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

Теги: html, css, css3, изображение, картинка, image, выравнивание, vertical-align

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

NetSurf 2.6+, Hv3.

Горизонтальное выравнивание изображения по центру с помощью CSS. Пример:

HTML / XHTML. Код:

.example {position: relative; left: 0px; top: 0px; height: auto; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa;}

.example img {display: block; margin: 0 auto;}

CSS свойства контейнера (в данном случае example ) могут быть самые разные, выравнивание изображения по центру создается с помощью стилей, непосредственно относящихся к изображению: .example img {display: block; margin: 0 auto;}.

А так же в Opera 4.0+, если не используется краткая запись CSS свойств. То есть, если код CSS в виде.example img {display: block; margin-left: auto; margin-right: auto;}.

А так же в Netscape 6.01+, Mozilla 0.6+.

Aliosque subditos et thema

1) Горизонтальное и вертикальное выравнивание по центру с помощью CSS - 1 Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру - по ширине и по высоте. Для более современных браузеров: [ Подробнее ] : [ Открыть страницу-пример ] 2) Горизонтальное и вертикальное выравнивание по центру с помощью CSS - 2 Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру - по ширине и по высоте. Более консервативный, чем предыдущий вариант. Подходит не только для современных браузеров, но и для более старых. Таких как Internet Explorer 6 или ранние версии Maxthon. При необходимости что-то изменить, требует больше усилий, чем первый способ: [ Подробнее ] : [ Открыть страницу-пример ] 3) Горизонтальное выравнивание блока неизвестной ширины Горизонтальное выравнивание блока неизвестной ширины средствами CSS: [ Подробнее ] : [ Открыть страницу-пример ] 4) Position: absolute по центру Горизонтальное выравнивание абсолютно позиционированного элемента по центру с помощью CSS: [ Подробнее ] 5) Изображение по центру CSS Горизонтальное выравнивание изображения по центру с помощью CSS: [ Подробнее ] 6) Вертикальное выравнивание CSS Вертикальное выравнивание CSS блочного элемента, содержащего текст и изображения: [ Подробнее ] 7) Выравнивание по центру с помощью JavaScript и CSS Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью JavaScript и CSS. Контейнер, в котором находится всё содержимое веб-страницы выравнивается по центру - по вертикали и по горизонтали: [ Подробнее ] : Два случая: 1. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024x768: [ Открыть страницу-пример ] 2. Контейнер выравнивается по центру, если разрешение экрана монитора равно или больше 1024x768 + курсор мыши наводится на ссылку в одном из элементов содержимого страницы: [ Открыть страницу-пример ]

MPlayer: FFmpeg Медиаплееры появились давно, но их расцвет начался с массовым распространением компьютеров достаточно мощных, что бы проигрывать видеофайлы. Это по времени совпало и с массовым распространением операционных систем и вообще софта с графическим интерфейсом. Однако в природе программы с графическим интерфейсом имеется двойственность: есть комплекс кода, который отвечает за графический интерфейс, за внешний вид и есть - за то, что бы выполнялась та задача, ради которой данное приложение вообще было создано. Оба комплекса потребляют системные ресурсы, их реакция на действия пользователя формирует какой-то объем времени ожидания. И в случаях или при концепциях, когда внешний вид признается менее важным - менее важным до степени отказа или почти отказа от него - появляются, помимо прочих, консольные приложения. Кроме того, разделенность GUI и движка позволяет легче менять графический интерфейс или совершать комплекс автоматизированных действий. Эта схема реализуется и в отношении медиаплееров для Windows. MPlayer, например, в обычном виде представляет собой консольное приложение, быстро запускающееся, имеющее быстрый отклик на действия пользователя, потребляющее системные ресурсы почти полностью на свою непосредственную задачу. И уже на эту основу при желании добавляется тот или иной графический интерфейс для создания, в общем, нового приложения. MPlayer - / home page / Консольный медиаплеер для Windows. Основа для SMPlayer и UMPlayer. Существуют версии для Linux, FreeBSD, NetBSD, OpenBSD, Apple Darwin, Mac OS X, QNX, OpenSolaris/Solaris, Irix, HP-UX, AIX, некоторых других *nix систем, BeOS, Syllable, AmigaOS, AROS, MorphOS, DOS, Windows. Поддерживаемые форматы видео, аудио, статичных изображений, субтитров и т.д. (Более полный список видео и аудио кодеков) MPlayer: "Dead Man" MPlayer: "Sky Captain and the World of Tomorrow" MPlayer: "10,000 BC" MPlayer: "13 Tzameti" MPlayer: "The Draughtsman"s Contract" MPlayer: "Женитьба Бальзаминова" FFmpeg - / home page / Набор утилит и библиотек для работы с видео и аудио файлами. Создан в и для Linux, но есть вариант и для Windows. Возможна компиляция под другие операционные системы. Поддерживаемые форматы файлов и кодеки: (Список). Так же, VLC медиаплеер может быть запущен с текстовым интерфейсом, с использованием ncurses.

Задача

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

Решение

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

Выравнивание фотографии по центру .fig { text-align: center; /* Выравнивание по центру */ }

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

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

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

Фотография с подписью .fig { display: block; /* Блочный элемент (для старых браузеров) */ text-align: center; /* Выравнивание по центру */ font-style: italic; /* Курсивное начертание */ margin-top: 0; /* Отступ сверху */ margin-bottom: 5px; /* Отступ снизу */ color: #666; /* Цвет подрисуночной подписи */ } document.createElement("figure"); document.createElement("figcaption"); Пещерный человек добывает огонь. Но что это за лунная поверхность на заднем плане? Нет, не так все просто.

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

Рис. 2. Подпись под рисунком

Для блока с фотографией используется тег , а для подписи к нему тег . Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.