Выравнивание по центру в CSS
Выравнивание элементов по центру в CSS — это одна из самых популярных причин чтобы пожаловаться на CSS. «Почему всё так сложно?» — возмущаются они. Мне кажется, что проблема заключается не в том что это трудно сделать, а в том что способов для выравнивания элементов по центру очень много и бывает достаточно сложно выбрать из них подходящий.
Давайте выстроим все возможные решения в виде древовидной схемы и будем надеяться, что это упростит нашу задачу.
Итак, мне нужно выравнять элемент по центру.
Горизонтальное выравнивание
Выравнивание по центру строкового или строково-* элемента
Выравнивать по центру строковые элементы внутри блочного родительского элемента можно достаточно просто:
Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.
Выравнивание по центру блочного элемента
Выравнять по центру блочный элемент вы можете установив свойствам margin-left и margin-right значение auto (у него также должна быть задана ширина, иначе элемент просто займёт всю ширину контента и не будет необходимости в выравнивании). Чаще всего это делается с помощью сокращённого свойства, вот так:
Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.
Обратите внимание, что вы не сможете обтекать элемент выравненный по центру таким способом. Однако и для этого есть трюк.
Выравнивание по центру нескольких блочных элементов
Если есть два или более блочных элементов, которые вам нужно выравнять горизонтально по центру в пределах одной строки, то возможно вам лучше изменить их тип отображения. Ниже приведён пример изменения их типа отображения на inline-block и пример с Flexbox:
Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:
Вертикальное выравнивание
Вертикальное выравнивание по центру в CSS немного сложнее.
Выравнивание по центру строкового или строково-* элемента
Выравнивание элемента с одной строкой
Иногда строковые/текстовые элементы могут выравниваться по центру просто потому что у них одинаковое значения для свойств padding-top и padding-bottom .
Если для вас по каким-то причинам padding — это не вариант, а вы пытаетесь выровнять по центру некоторый текст и точно знаете, что он не будет обёрнут чем-то ещё, то есть есть небольшой трюк, суть которого заключается в том чтобы установить свойство line-height равным значению высоты элемента.
Выравнивание многострочного элемента
Одинаковые отступы сверху и снизу могут создать эффект выравнивания по центру и для многострочных элементов, но если это не сработает, то возможно что элемент в котором находится текст является ячейкой таблицы, либо такое его поведение явно задано со помощью CSS. В данном свойство vertical-align обрабатывает это, в отличии от того что оно обычно обрабатывает выравнивание элементов внутри строки.
Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.
Помните, что это на самом деле актуально когда у контейнера есть фиксированная высота ( px , % , и другие), вот почему здесь у контейнера задана высота.
Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.
Выравнивание по центру блочного элемента
Выравнивание элемента с известной высотой
Довольно часто мы не можем знать высоту, по многим причинам: если изменяется ширина, текст может форматироваться и изменять высоту. Разная стилизация текста может изменять высоту. Разный размер шрифта может изменить высоту. Элементы с фиксированным соотношением сторон, такие как изображения, могут изменять высоту при изменении собственных размеров и т.д.
Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:
Выравнивание элемента с неизвестной высотой
Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:
Выравнивание элемента с помощью Flexbox
Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.
Горизонтальное и вертикальное выравнивание
Вы можете комбинировать представленные выше техники для того чтобы получить идеально выравненные по центру элементы. Но обычно их можно разделить на 4 группы:
Выравнивание элемента с фиксированной шириной и высотой
Использование отрицательных отступов ( maring ) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:
Выравнивание элемента с неизвестной шириной и высотой
Если вы не знаете ширину или высоту элемента, то можете использовать свойство transform и отрицательный translate в 50% в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:
Выравнивание элемента с помощью Flexbox
Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:
Выравнивание элемента с помощью CSS Grid
Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:
Как выровнять по центру в CSS
Как часто у вас, как у веб-дизайнера, возникает задача при помощи CSS выровнять по центру какой-либо элемент на странице? Иногда это сделать очень легко, а иногда приходится повозиться. В этой статье предлагаю раз и навсегда разобраться в данном вопросе чтобы выравнивание в CSS не вызывало у вас никаких проблем.
Все примеры в этой статье интерактивные. Размеры и расположение элементов в них можно менять. Для этого нужно просто .
Подсказка: наведите курсор на правый нижний угол.
Как в CSS выровнять по горизонтали?
В зависимости от того, какой элемент вам нужно выровнять по центру горизонтально, можно воспользоваться одним из следующих способов.
text-align: center
Самый быстрый и простой способ выровнять текст или изображение по центру родительского элемента — использовать свойство CSS text-align: center . Чтобы этот метод работал, элементы, которые вы хотите отцентровать, должны иметь свойство display — inline или inline-block , а их родительский элемент должен быть блочным (block или inline-block ). Поэтому если text-align: center не работает, проверьте, все ли в порядке со свойством display .
margin: auto
При помощи свойства margin можно центрировать блочные элементы. Однако margin: auto работает только для выравнивания по горизонтали. К тому же, обязательно должна быть задана ширина ( width , min-width или max-width ). Если ее не задать, блок растянется на всю ширину родительского элемента.
Если ширина блока неизвестна или вы не хотите ее жестко ограничивать, данный метод не подходит.
Как в CSS выровнять по вертикали?
Часто именно выравнивание по вертикали вызывает большое количество трудностей и непонимания. Но на самом деле ничего сложного в этом нет. Давайте разберемся по порядку.
padding или line-height
Допустим, вам нужно выровнять все содержимое элемента по центру вертикально, т.е. нужно чтобы расстояние от верхней границы элемента до верхнего края контента было равным расстоянию от нижней границы элемента до нижнего края контента. Для этого можнопросто задать равные вертикальные отступы padding .
Другой способ — выравнивание содержимого по вертикальному центру при помощи свойства line-height . Он подойдет тогда, когда высота элемента фиксированная и задана при помощи свойства height , а содержимое этого элемента помещается в одну строку (согласен, слишком много ограничений).
Обратите внимание, что значения height и line-height должны быть равными.
vertical-align: middle
Свойство CSS vertical-align выравнивает элемент по вертикали относительно родительского элемента, окружающего текста или ячейки таблицы. Однако с ним не все так просто. Это свойство работает только для inline-элементов (span, img и т.д) и элементов с display: inline-block ;
Кроме того, при помощи свойства vertical-align можно выровнять по вертикали содержимое ячеек таблицы. Этим можно воспользоваться для того, чтобы выровнять блочный элемент, хакнуть систему, так сказать.
Для того, чтобы этот метод работал, как задумано, нужно задать абсолютные (в px) размеры родительского элемента. У дочернего элемента ширина и высота могут быть относительными (например, в %).
transform: translate()
Свойство CSS transform позволяет двигать, вращать, изменять размер и форму элемента. Этот инструмент настоящий must have для создания современных адаптивных и интерактивных дизайнов. Поэтому ему будет посвящена отдельная статья (а может и две 😉
В рамках этой статьи рассмотрим использование свойства transform c функцией translate() в качестве значения. Суть метода сводится к следующему:
Обратите внимание, что родительскому элементу нужно задать position: relative; иначе дочерний элемент будет выравниваться относительно ближайшего родителя с position: relative или, если такого нет, — относительно страницы.
Итак, мы выровняли элемент по центру. Или не совсем по центру? Дело в том, что по центру выравнивается левый верхний угол блока (так сказать, начало его координат). Если блок имеет фиксированный размер и он нам известен, можно сдвинуть его (блок) на расстояние равное половине размера при помощи свойства margin .
Но лучше воспользоваться волшебным свойством transform: translate(-50%, -50%); Оно также сдвигает блок на половину его длины и высоты соответственно, при этом нам не нужно указывать абсолютные размеры. Для адаптивного дизайна то, что нужно!
flexbox CSS
Flexbox — современный и очень гибкий способ расположения элементов на странице, который позволяет с легкостью создавать красивые интерфейсы, не засоряя код лишней разметкой и стилями. Я очень рекомендую вам им овладеть. В ближайших постах обязательно расскажу о нем подробнее.
Ну а пока вернемся к выравниванию по центру.
Теперь давайте разберемся, что все это значит.
display: flex
При помощи этого свойства преобразуем родительский элемент в так называемый гибкий контейнер (flex container), при этом все вложенные элементыпервого уровня (т.е. непосредственные дочерние элементы) становятся так называемыми гибкими элементами(flex items), и вместе это все составляет flexbox лэйаут.
justify-content: center
Это свойство выравнивает содержимое контейнера по центру вдоль основной оси. Одним из ключевых моментов в модели flexbox является ось, вдоль которой располагаются элементы контейнера (свойство flex-direction ). Ось может быть либо горизонтальной ( row или row-reverse ), либо вертикальной ( column или column-reverse ). По умолчанию используется значение row , т.е. наши элементы располагаются по горизонтальной оси слева направо.
align-items: center
Кроме основной оси в flexbox есть перпендикулярная ей второстепенная ось. В данном случае, она вертикальная. Свойство align-items описывает, как элементы контейнера расположены относительно нее.
Вот примерно то, что должно получиться.
Преимущество этого метода в его лаконичности, адаптивности (я имею в виду респонсивность) и, конечно, гибкости. Так, например, если вам нужно, чтобы по центру был не один блок, а несколько — просто добавьте их в HTML, никаких изменений в CSS вносить при этом не нужно. Ну разве не прелесть?!
Как вы, наверное догадались я предпочитаю использовать именно этот способ. Но это не значит, что я не пользуюсь другими. Все эти способы можно и нужно использовать (за исключением способа с vertical-align: middle и display: table-cell ), каждый в своей ситуации. Например, незачем использовать flexbox если вам просто нужно выровнять текст или картинку по центру горизонтально.
Надеюсь, вы нашли в этой статье то, что искали. А если нет, спросите в комментариях, я обязательно отвечу. Всем удачного центрирвания!
Как Выровнять Изображение По Центру В CSS
Установите правильное выравнивание изображений с помощью CSS, чтобы они правильно отображались на вашем сайте. Вот как.
Отображение изображений в центре веб-страницы часто выглядит более привлекательно и вызывает больше интереса, чем их размещение сбоку.
С помощью CSS можно задать выравнивание изображения, как в элементе контейнера фиксированного размера, так и в отзывчивом контейнере.
Вот что вам нужно сделать ��
Важное раскрытие информации: мы являемся гордыми партнерами некоторых инструментов, упомянутых в этом руководстве. Если вы перейдете по партнерской ссылке и впоследствии совершите покупку, мы получим небольшую комиссию без дополнительных затрат с вашей стороны (вы ничего не платите дополнительно). Для получения дополнительной информации ознакомьтесь с нашим раскрытием информации о партнерах.
Выравнивание Изображения По Центру В CSS
Чтобы отцентрировать изображение по горизонтали и вертикали, необходимо использовать flexbox в качестве настройки отображения и определить правильные свойства.
Вот как будет выглядеть код:
Центрирование Изображения В Отзывчивом Контейнере
Если вы хотите центрировать изображение в отзывчивом контейнере, чтобы оно выглядело центрированным на любом устройстве, то вам нужно задать еще несколько свойств.
Вы можете использовать медиа-запросы для настройки ширины и высоты контейнера в зависимости от размера экрана.
Вот как будет выглядеть код:
Параметры медиазапроса позволяют создавать различные макеты для разных размеров экрана, изменяя ширину и высоту контейнера на 720px и 480px соответственно, когда ширина области просмотра составляет 720 пикселей или больше.
Часто Задаваемые Вопросы
Как выровнять изображение по горизонтали?
Установите для элементов контейнера display в ‘flex’ и укажите свойству justify-content значение center.
Как выровнять изображение по вертикали?
Установите для отображения контейнера/родительского элемента значение ‘flex’ и укажите свойству align-items значение center.
Можно ли центрировать изображение без flexbox?
Используйте этот код для центрирования изображения без flexbox.
Мы надеемся, что эта статья была вам полезна. Чтобы узнать больше о CSS, ознакомьтесь с остальными нашими учебниками.
Как поставить изображение по центру html
БлогNot. HTML: как правильно центрировать текст и картинку в разделе
HTML: как правильно центрировать текст и картинку в разделе
Средний web-мастер, когда ему нужно чего-нибудь центрировать на страничке (по горизонтали), обычно умеет это:
С вертикалью надо уже напрягаться, а уж с центированием разнородного контента (чаще всего текста + картинки) и вовсе туго.
Меж тем, всё довольно просто, и даже без привлечения нестандартных для HTML5 атрибутов вроде того же align .
Если речь конкретно о тексте и картинке, выровненных по центру родительского раздела, который тоже хочет равняться по центру, то вот так (код с картинкой и текстом, на данный момент валидный):
скриншот этого кода
Как будет время, постараюсь позанудствовать поподробней на тему новых веяний в выравнивании элементов HTML без align=»чото» и подобных анахронизмов 🙂