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

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

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

Я предлагаю три способа решения, которые наиболее часто используются в HTML и CSS.

Способ 1

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

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

Есть лого. Содержится внутри тега h1 , принадлежащего классу logo .
В CSS у #logo стоит text-align: left , я его перегружаю в #logo img , пишу text-align: center . Даже в теге img прописываю align=»middle» . Хоть бы хны, всё равно слева. Отладчики хрома и оперы показывают, что у изображения стоит свойство text-align: center . На всякий случай, так выглядит рассчитанный стиль:

background-attachment: scroll; background-clip: border-box; background-color: #EEE; background-image: url(header_outer.jpg); background-origin: padding-box; color: #333; display: block; font-family: arial, helvetica, sans-serif; font-size: 16px; height: 1133px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; text-align: center; width: 1263px;

Отслеживать
8,667 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
задан 20 мая 2011 в 20:35
185 2 2 золотых знака 2 2 серебряных знака 11 11 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

text-align не работает для изображений, это свойство выравнивает только текст. Чтобы выровнять что-либо, этому объекту нужно задать свойство display:block; , потом задать ему ширину width: 1263px; и в конце присвоить ему свойство margin:0 auto; .

Отслеживать
8,667 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
ответ дан 21 мая 2011 в 8:56
141 6 6 бронзовых знаков

вам прийдется убрать: margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; position: relative; иначе то что я написал выше работать не будет

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

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

Решение

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Выравнивание фотографии по центру   Текст до изображения
 
 Текст после изображения

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

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

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

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

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