Как выровнять фотографию по центру веб-страницы?
Выровнять фотографию с подписью по центру горизонтали веб-страницы.
Решение
Иллюстрации к тексту часто выравнивают по центру веб-страницы, при этом текст располагается до и после изображения. Такое расположение элементов позволяет разбить большой текст на смысловые блоки и привлечь внимание к рисункам.
Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору 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. Подпись под рисунком
Для блока с фотографией используется тег , а для подписи к нему тег . Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.
Как выровнять 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
Надеемся, что сегодня, прочитав эту статью, вы узнали что-то новое, и вы будете использовать полученные знания при разработке своих сайтов.
Выравниваем картинки по центру в HTML
Итак, как и любой начинающий верстальщик, вы сталкивались с проблемой: как выровнять картинки по центру веб-страницы? И тут идут разные ухищрения вроде использования тега center, который настолько устарел, что и говорить уже о нем не нужно.
Я предлагаю три способа решения, которые наиболее часто используются в HTML и CSS.
Способ 1
Наиболее простой способ – это присвоить картинке класс, а затем, с помощью CSS сделать картинку блоком, после чего задать ей автоматическое выравнивание с правой и левой части.
Выравнивание картинки по центру div
Хорошая статья на habrahabr.ru Абсолютное горизонтальное и вертикальное центрирование там все просто: выбираем соответствующий вариант и меняем параметры position и display если надо.
– user207693
7 сен 2016 в 7:55
7 ответов 7
Сортировка: Сброс на вариант по умолчанию
Можно в CSS задать:
.row img
Отслеживать
ответ дан 25 дек 2013 в 13:34
1,815 10 10 серебряных знаков 18 18 бронзовых знаков
только указать doctype надо)) честно, сталкивался, тогда не поможет)
25 дек 2013 в 13:39
доктайп есть, но не помогло 🙁
25 дек 2013 в 13:45
Отцентровать вертикально? Вы на верном пути.
Только по именам классов очень похоже, что вы используете bootstrap 2 , а в этом фреймворке для классов span* задано float: left , что противоречит display: table-cell . Укажите явно float: none .
Отслеживать
27.5k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
ответ дан 25 дек 2013 в 14:11
Елена Левина Елена Левина
2,210 12 12 серебряных знаков 10 10 бронзовых знаков
А сделать картинку фоном этого дива в бы не хотели?
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 25 дек 2013 в 13:30
Дмитрий Клименко Дмитрий Клименко
760 3 3 серебряных знака 11 11 бронзовых знаков
.row .span2 < display:flex; justify-content: center; /*центрируем элемент по горизонтали */ align-items: center; /* и вертикали */ width: 200px; /* задали размеры блоку-родителю */ height: 200px; overflow: hidden; /* если элемент больше блока-родителя – обрезаем лишнее */ >
Для img ничего прописывать не нужно. Любой блок внутри .row .span2 будет центрироваться сам.
Подробнее о центрировании при помощи флексбокса http://jedicss.com/css-kartinka-po-centru/
Отслеживать
ответ дан 8 апр 2017 в 15:14
Найкрис Кроули Найкрис Кроули
21 2 2 бронзовых знака
Поясните, почему вы считаете, что ваш ответ решит проблему ОП.
8 апр 2017 в 15:35
Если нужно по горизонтали и вертикали выровнять по центру, то так:
.row < position: relative; >.span2
Отслеживать
51.6k 199 199 золотых знаков 59 59 серебряных знаков 242 242 бронзовых знака
ответ дан 17 мая 2018 в 20:37
Nazar Lesyuk Nazar Lesyuk
19 2 2 бронзовых знака
.span2 < display: flex; justify-content: center; >.span2 img
Отслеживать
ответ дан 4 сен 2016 в 18:11
76 7 7 бронзовых знаков
.span2 < display: flex; width: 3rem; height: 3rem; >.span2 img
Отслеживать
ответ дан 23 дек 2020 в 7:36
Тимофей Басалай Тимофей Басалай
23 дек 2020 в 7:38
Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.