Как выровнять фотографию по центру веб-страницы?
Выровнять фотографию с подписью по центру горизонтали веб-страницы.
Решение
Иллюстрации к тексту часто выравнивают по центру веб-страницы, при этом текст располагается до и после изображения. Такое расположение элементов позволяет разбить большой текст на смысловые блоки и привлечь внимание к рисункам.
Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору 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
Фотография с подписью
Для блока с фотографией используется тег , а для подписи к нему тег . Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.
Выравнивание картинки по центру 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 200 200 золотых знаков 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.
Выравниваем картинки по центру в HTML
Итак, как и любой начинающий верстальщик, вы сталкивались с проблемой: как выровнять картинки по центру веб-страницы? И тут идут разные ухищрения вроде использования тега center, который настолько устарел, что и говорить уже о нем не нужно.
Я предлагаю три способа решения, которые наиболее часто используются в HTML и CSS.
Способ 1
Наиболее простой способ – это присвоить картинке класс, а затем, с помощью CSS сделать картинку блоком, после чего задать ей автоматическое выравнивание с правой и левой части.
Выравнивание по центру в CSS: приёмы, свойства, подводные камни
Как расположить что угодно по центру чего угодно с помощью каскадных таблиц стилей.
Иллюстрация: Оля Ежак для Skillbox Media
Иван Стуков
Журналист, изучает Python. Любит разбираться в мелочах, общаться с людьми и понимать их.
CSS существует и развивается с 1996 года. За четверть века и три редакции в этом языке появилось много разных способов отцентрировать элемент — как костыльных, так и каноничных.
В статье мы расскажем об основных приёмах для выравнивания по центру в CSS. Какой из них более удобен и приятен — решать вам.
- С помощью Flexbox
- Через автоотступы
- С помощью inline-блоков
- Выравнивание нескольких элементов
- С помощью Flexbox
- С помощью свойств position и transform
- Ячейки таблицы
- С помощью Flexbox
- С помощью свойств position и transform
- Через CSS Grid
- Центрирование текста по горизонтали
- Центрирование текста по вертикали
- Как выровнять заголовок, список или форму
- Как центрировать блок
- Как разместить блок посередине страницы
- Выравнивание картинок и кнопок по центру
Горизонтальное центрирование
Как работают способы из этого раздела, мы покажем на примере блоков div, однако применять их можно и к другим элементам: заголовкам, абзацам, изображениям, кнопкам, формам, спискам и так далее.
Для наглядности мы добавим границы блоков: синие для родительских и чёрные для дочерних.
С помощью Flexbox
Добавьте в родительский элемент свойства display: flex, чтобы сделать элемент flex-контейнером, и justify-content: center, чтобы контент внутри контейнера расположился посередине горизонтальной оси. Обратите внимание: justify-content действует только на flex-элементы, поэтому без display: flex он не заработает.
Преимущество такого метода в том, что дочерний блок будет автоматически подстраиваться под размеры содержимого. Если же нужно задать размеры явно, то сделать это можно с помощью width для ширины, и height для высоты.
Через автоотступы
Добавьте свойства margin-left: auto и margin-right: auto — они устанавливают автоматические отступы слева и справа. И укажите ширину с помощью width:
Преимущество метода состоит в том, что не нужно явно прописывать свойства родительского элемента (в нашем случае это body).
Две строки с автоотступами можно заменить на одну: margin: 0 auto или margin: auto. В обоих случаях результат будет одинаковым.
С помощью inline-блоков
Проще всего выравнивать текст по горизонтали. Для этого существует свойство text-align: center, которое применяется к родительскому элементу.
Несмотря на своё название, text-align можно применять не только к тексту. Для этого нужно сделать элементы, которые хотите выровнять, встроенными — с помощью display: inline-block.
В этом методе так же, как и в первом, размеры блока подстраиваются под содержимое. Но при желании можно явно задать ширину и высоту.
Выравнивание нескольких элементов
Каждый из трёх способов будет вести себя по-разному, если мы будем размещать по центру сразу несколько элементов. Возьмём один и тот же HTML-код и последовательно применим к нему описанные выше методы:
С автоотступами каждый блочный элемент помещается в отдельную строку:
Инлайн-блоки остаются в одном ряду, но у них будет разная высота (у каждого — по размеру контента). Плюс текст в них автоматически выравнивается по центру.
Вертикальное центрирование
При горизонтальном центрировании легко определить ширину родительского элемента: если она не задана явно, то обычно равна ширине экрана. При вертикальном центрировании всё немного сложнее: высоту родительского элемента приходится задавать явно с помощью свойства height.
Как и в прошлом разделе, мы будем показывать работу всех методов на примере блоков div и добавим те же границы: синие — для родительских и чёрные — для дочерних элементов. Во всех примерах будем использовать один и тот же HTML-код:
С помощью свойств position и transform
Этот способ использует сразу много свойств для разных целей, поэтому разберём его по шагам.
Родительскому элементу нужно присвоить свойство position: relative, а дочернему — position: absolute. Благодаря этому мы сможем сдвинуть дочерний блок относительно верхнего края родительского, используя свойство top: 50%.
Обратите внимание, что сейчас по центру расположена не середина блока с текстом, а его верхняя граница. Чтобы исправить это, дочерний элемент нужно сдвинуть на половину его высоты вверх. Делается это свойством transform: translate (0, -50%). Первое число означает смещение по горизонтали, второе — по вертикали.
Если по какой-то причине вы не хотите использовать свойство transform, вместо него можно поставить margin. Но для этого необходимо знать размер дочернего элемента и установить отрицательный margin-top, равный половине его высоты.
Ячейки таблицы
Добавьте в родительский элемент display: table-cell, чтобы блок вёл себя как ячейка таблицы, и vertical-align: middle — это свойство центрирует содержимое блока по вертикали.
Это довольно костыльный и не очень удобный способ. Так как ячейка находится вне таблицы, мы не можем корректно управлять её шириной. Для этого нужно создать родительский элемент со свойством display: table и задавать width уже внутри него.
Выравнивание по центру
Чтобы поместить элемент по центру родительского блока (то есть выровнять одновременно по горизонтали и вертикали), иногда достаточно объединить под одним селектором методы горизонтального и вертикального центрирования.
Во всех примерах мы будем использовать один и тот же HTML-код и получать один и тот же результат.
С помощью Flexbox
Чтобы центрировать элемент с помощью Flexbox, достаточно объединить горизонтальный и вертикальный способы:
Если добавить в абзаце автоматические отступы, то у текста как будто появятся границы, за которые он не будет выходить.
При желании также можно использовать флексбоксы, но это менее удобно, потому что в таком случае придётся явно задавать родительский элемент.
Центрирование текста по вертикали
Все способы вертикального центрирования можно использовать и для выравнивания текста. В приведённых ниже примерах голубой рамкой выделены родительские элементы.
Flexbox. В этом случае нужно задать стили только для родительского элемента, а для дочернего CSS-кода можно не писать.
Позиционирование. Если применить к элементу свойства position и transform, позиционирование будет работать некорректно из-за того, что по умолчанию у него есть отступы. Решить это можно двумя путями.
Первый (рекомендуемый) — убрать из абзаца отступ свойством margin: 0.
Ячейки таблицы. Здесь так же, как и в случае с флексбоксами, нужно задать стиль только для родительского элемента.
Как выровнять заголовок, список или форму
К заголовкам, спискам и формам применяются все те же способы позиционирования по центру, что и к обычному тексту: как по горизонтали, так и по вертикали.
Единственная особенность списков — их родителю не стоит присваивать свойство text-align: center. Выглядеть это будет плохо, можете убедиться в этом на следующем примере.
Как центрировать блок
Когда мы рассказывали о способах выравнивания элементов, приводили примеры именно на блоках. Поэтому, если вы ищете ответ на этот вопрос, перейдите в один из предыдущих разделов:
- Горизонтальное центрирование
- Вертикальное центрирование
- Выравнивание по центру
Как разместить блок посередине страницы
Чтобы поставить блок в центре веб-страницы, можно использовать любой из перечисленных выше способов. Однако будет два различия:
- в качестве родительского элемента выступает всё тело веб-страницы (элемент );
- необязательно явно указывать высоту блока.
Во всех примерах результат будет одинаковым. Как и раньше, голубую и чёрную рамку используем для наглядности.
Flexbox. Недостаток этого подхода в том, что такая страница будет выравнивать по центру все элементы внутри себя, а не только те, которые нам нужны.
При выравнивании с помощью Flexbox изображения или кнопки могут вести себя необычно. Вот в каких случаях это происходит:
- задана высота родительского блока;
- не заданы размеры картинки;
- не указано свойство align-items.
При выполнении всех трёх условий изображение или кнопка растянутся, чтобы занять всё пространство родительского элемента — от верхней границы до нижней.
В остальных случаях флексбоксы будут работать так же, как и с блочными элементами.
Резюмируем
Основная сложность при выравнивании элементов веб-страницы по центру — обилие подходов, у каждого из которых свои тонкости и ограничения:
- Flexbox удобен для любого вида выравнивания. При таком подходе необходимо задавать стили только родительскому элементу.
- Позиционирование можно использовать для выравнивания по вертикали и размещения элемента по центру блока (выравнивания по вертикали и горизонтали одновременно).
- Автоотступы и inline-блоки удобно использовать для горизонтального выравнивания, ячейки таблицы — для вертикального, Grid — для размещения элемента по центру родительского блока.
Больше интересного про код в нашем телеграм-канале. Подписывайтесь!
Читайте также:
- Селекторы в CSS: что это такое, как они работают и какие бывают
- Заняться фронтенд-разработкой в 12 лет, выиграть IT‑чемпионат в 13: история Али Сулейманова
- Учимся верстать: что такое CSS