Img по центру блока

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 9.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

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

Решение

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

Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору 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

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

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

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

Читайте также:  Приставка xiaomi mi box обзор

Приветствуй вас на сайте Impuls-Web!

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

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

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

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

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

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

6 ответов 6

Отцентровать вертикально? Вы на верном пути.

Только по именам классов очень похоже, что вы используете bootstrap 2 , а в этом фреймворке для классов span* задано float: left , что противоречит display: table-cell . Укажите явно float: none .

Можно в CSS задать:

А сделать картинку фоном этого дива в бы не хотели?

Если нужно по горизонтали и вертикали выровнять по центру, то так:

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

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

Adblock detector