Как выровнять меню по центру css

Выровнять меню по центру

А чего вы пытаетесь добиться? Чтобы элементы списка были по центру родительского ul или чтобы ul был по центру блока с id#templatemo_menu?

25 ноя 2014 в 8:31

чтобы ссылки в меню были по цетру страницы, само меню фон, и так отцентрованы, а вот ссылки все збились влево.

25 ноя 2014 в 8:36

1 ответ 1

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

Вот такой вариант можно попробовать, в комментариях к css я написал, что добавил, и закомментировал, что убрал.

Кратко: убрал ширину у блоков и добавил display: inline-block у самого меню. По центру там уже было нужное выравнивание с помощью text-align:center у блока с #templatemo_menu . Другие центрирования можно убрать: float:center вообще не существует и margin:0 auto; , который в данном случае не работает.

Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
ответ дан 25 ноя 2014 в 8:37
MasterAlex MasterAlex
6,167 1 1 золотой знак 12 12 серебряных знаков 23 23 бронзовых знака
Спасибо. То, что нужно!
25 ноя 2014 в 8:44

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Выравнивание меню по центру?

как в css выровнять верхнее меню навигации ? margin: 0 auto не получается.

вот собственно css:

/* Верхнее навигационное меню -------------------------------------------------------------- */ #topheader-wrap < top: 0px; width: 100%; background: #03658e url(image/spriteme2.png) repeat-x; background-position: 0px -10px; height: 31px; z-index: 1000; >#topheader #header-search < float: right; >#topnav-icon < display: none; >#topnav-menu < margin: 0 auto; list-style-type: none; list-style-position: outside; position: relative; >#topnav-menu li < float: left; position: relative; margin: 0 auto; >#topnav-menu a < display: block; padding: 0.8em 1em; text-decoration: none; font-size: 0.8em; text-transform: uppercase; margin: 0 auto; >#topnav-menu a:link, #topnav-menu a:visited < color: #fff; text-decoration: none; margin:0 auto; >#topnav-menu a:hover < background: rgba(0,0,0,0.2); >#topnav-menu li.current_page_item a, #topnav-menu li.current-menu-item a

и скажите пожалуйста может в коде много лишнего есть, что надо убрать

• Вопрос задан более трёх лет назад
• 5494 просмотра

Как выровнять меню по центру? [перемещено] — Вопросы по CSS

Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��

JoomlaDay Spain, Madrid.

В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.

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

Каскадные таблицы стилей CSS советы & приёмы

Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:

которое отображает каждую строку в абзаце P или заголовке H2 по центру между полями, вот так:

Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

Следующее изображение центрировано:

Вертикальное центрирование

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

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

таблица стилей выглядит так:

1. Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
2. Сам элемент сделайте абсолютно позиционированным (position: absolute).
3. Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Как выровнять по центру в 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 Flexbox

В этой статье будет рассмотрен очень важный момент при вёрстке любого шаблона, а именно центрирование элементов. В Flexbox это стало гораздо проще и стабильнее.

Эта статья одна из завершающих из цикла переводов про CSS Flexbox. Скоро все они будут скомпонованы в один большой, понятный и объёмный гайд по изучению CSS Flexbox.

��Мой Твиттер — там много из мира фронтенда, да и вообще поговорим��. Подписывайтесь, будет интересно: ) ✈️

В примерах с навигацией используется пример кода отсюда.

Разочаровались в попытках использования CSS для выравнивания по центру с div ’ами, изображениями и текстом?

Вообще, выравнивание горизонтально и вертикально в CSS всегда было таким, каким-то странным и зачастую не таким, как вообще задумывалось. Я успел применить буквально все хаки в этом направлении за последние несколько лет.

К сожалению, во флотах нет опции center , только left и right . Ну и конечно же там нет опции vertical-center .

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

Вообще, во Flexbox стало очень легко отцентровывать текст, изображения и div ’ы. Но это не означает того, что это единственный способ центрировать контент.

Вы наверное делали как я и искали на пространствах сети лучшие способы горизонтальной и вертикальной центровки в HTML.

Я не буду докучать вам объяснениями этих старых хаков с применением внешних отступов, абсолютного и фиксированного позиционирования. Они до сих пор работают, но уже сейчас пора от них избавляться.

Как отцентровать текст в CSS с помощью text-align

Если вам нужно отцентровать текст c CSS внутри элемента, например div ’а, заголовка или параграфа, вы можете смело использовать свойство text-align .

Выставление text-align на center является самым распространенным способом горизонтального выравнивания текста с помощью CSS. Этот подход не ограничивается только текстом, он может использоваться для центровки почти всех элементов потомков, которые меньше родительского контейнера.

Вот три вещи, которые нужно обязательно знать правильного использования text-align , чтобы горизонтально отцентровать текст или элементы потомки.

Текст или элемент центрирования должен быть обёрнут или находится в родительском элементе, который самой собой шире.

Родительский элемент должен иметь text-align: center .

Если вы центрируете элемент, то его свойство display должно быть с inline-block .

Если у вас несколько дочерних элементов, то они все дружно будут отцентрированы внутри родительского контейнера.

text-align имеет несколько свойств:

center : текст отцентрован.

left : текст выровнен по левой стороне контейнера.

right : текст выровнен по правой стороне контейнера.

justify : текст выстраивается ровно по левой и правой граням контейнера, за исключением последней строки.

justify-all : выравнивает последнюю строку.

start : тоже самое, что и left , если написание идёт слева направо. Но будет right , если написание справа налево.

end : start, только наоборот.

match-parent : тоже, что и inherit , но только start и end высчитываются с учетом родительского элемента.

Используйте эти свойства для выравнивания текста внутри родительского элемента или div ’а врапера. Тут всё обыденно и просто.

Выравниваем элементы горизонтально с text-align

Вы можете смело использовать свойство text-align , чтобы выравнивать элементы потомки.

Хороший пример — центровка панели навигации. Это может показаться тягомотиной, так как ширина каждого элемента меню зависит от его текста.

Вообще, центрирование куда проще, если вы знаете точную ширину родителя и его потомков.

Вы можете применить text-align: center для врапера панели навигации. А внешний “родительский” элемент, то есть ul , должен быть с dispay: inline-block .

Ну, а чтобы элементы меню выглядели выровненными, поставим им float: left .

И теперь у вас горизонтально выровненное меню.

Это хороший способ для центрирования элементов, но это очень старый хак.

В наше время у нас уже есть кое-что получше, а именно CSS Flexbox.

CSS Flexbox

Flexbox был добавлен в стандарты CSS несколько лет назад, в основном для того, чтобы разобраться с распределением места и выравниванием элементов. По сути, это синтаксис одномерной раскладки.

А в купе с более новым CSS Grid, веб-разработчики получают куда более мощный инструмент для разработки сложных шаблонов, которые в последствии будет куда проще поддерживать.

Мы говорим, что это одномерный контроль раскладки, но на самом деле у него есть оси x и y. Как вы увидите далее, выравнивание в каждом случае будет происходить с разными свойствами.

Flexbox уже поддерживается всеми современными браузерами, включая даже Internet Explorer, который скоро прикроют. В общем, вы можете смело и уверенно использовать Flexbox в вашем CSS.

Центрируем текст горизонтально и вертикально, используя CSS для выравнивания по центру

Центрирование текста по абсолютному центру традиционно было было одной из самых распространенных проблем с костыльными решениями, которые решил Flexbox. В прошлом было неимоверно много хаков и костылей, таких как использование display: table и т.п. Как я и упоминал ранее, Flexbox сделал этот сложный и неестественный процесс куда более проще.

Для начала, давайте посмотрим на эту разметку, которая демонстрирует то, как отцентрировать текст горизонтально и вертикально.

Это div с элементами заголовков. Мы будем использовать CSS не только для горизонтального центрирования, но и для вертикального. Вы можете вставить любые элементы потомки, такие как

или . Вообще очень крутая штука в CSS Flexbox в том, что его инструментарий может центрировать вертикально и горизонтально буквально всё, что только можно!

Тут div будет занимать всю доступную ширину и будет минимум в 200px высотой. Это даст нам вертикальные маргины для использования в этом примере.

Вся магия произойдет тогда, когда вы выставите display на flex . Когда display стоит на flex , вы можете использовать дополнительные flexbox свойства для управления уже самим макетом.

align-items и justify-content это важные свойства для абсолютного центрирования текста горизонтально и вертикально. Горизонтальное центрирование происходит с помощью justify-content , а вертикальное с align-items .

align-items может использоваться не только для центровки текста вертикально, но и любого дочернего элемента.

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

Горизонтальное центрирование div’ов с использованием CSS Flexbox

Flexbox делает центровку элементов простым и естественным процессом.

Поставьте родительскому элементу .navbar display:flex; . Выставите ширину, в этом примере я хочу, чтобы панель навигации растянулась по всему вьюпорту, то есть на 100%.

Чтобы выставить по центру дочерние элементы, поставьте justify-content: center для элемента родителя.

Чтобы сделать CSS более юзабельным, я разбил стили по разным селекторам:

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

Вертикальное центрирование div’ов с CSS Flexbox

Горизонтальное центрирование никогда не было самым сложным моментом.

Но что у нас с вертикальным центрированием? Ну или как бы мы применили CSS, что вертикально выровнять элементы?

Во многих случаях, это тот момент, при котором большинство разработчиков рвут на себе волосы.

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

Flexbox наконец-то исправил проблемы с вертикальным центрированием, выдав эту кейсу четкое и понятное правило для применения.

Как и с justify-content: center , которое выстраивает элементы потомки по центру оси x, flexbox align-items: center делает это по оси y.

В примере с меню в хедере, враппер навигационной панели отцентрирован вертикально.

Тут элемент хедер служит родителем для навигационной панели, и его ширина равна 100%, а min-height стоит на 80px.

Так как навигационная панель сама по себе меньше, чем 80px, то тут есть пустое место, с которым мы можем поиграться. Так мы можем сделать навигацию равноудаленной от вершины до низа хедера, добавив ему display: flex и align-items: center .

Абсолютное центрирование div’ов с использованием CSS Flexbox

Пока что мы только узнали то, как отцентрировать элементы горизонтально или вертикально. А теперь пора скомбинировать эти два метода.

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

Всё, что вам для этого нужно сделать, это добавить как justify-content: center и align-items: center , ну и flex-direction: column в css для .

Вы можете применять эту комбинацию flexbox свойств для центровки любого элемента, а не только navbar . Изображения, div ’ы и т.п. Все они могут быть также абсолютно отцентрированы внутри родительского элемента.

Можете посмотреть на то, как я применил этот принцип на полноэкранном фоновом изображении.

Как отцентровать изображение в CSS с помощью text-align и Flexbox

Вообще, изображения могут быть выровнены с использованием свойств text-align и flexbox.

Вы можете применить text-align для элемента родителя изображения с right , left и center возможностями выравнивания.

Вы также можете применить флоат слева или cправа, для размещения изображения у желаемой грани контейнера. Я склонен к тому, чтобы использовать флоат, так как обычно я выравниваю изображения внутри текста статьи.

Но тут всё ещё довольно проблематично сделать выравнивание без flexbox. Если вы примените абсолютное центрирование из флексов для контейнера изображения, то вы смело можете выставить картинку по центру обеих осей, ну или только одной, тут уже на ваш выбор.

Просто ради забавы, давайте выровняем изображение с использованием flexbox.

Те же самые правила, что и в примере выше.

Делаем родительский элемент display: flex , он должен быть больше или равным изображению по размерам, align-items и justify-content должны иметь center, а flex-direction выставлен на column .

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

Заключение

Контроль элементов и позиционирования текста это важнейший аспект при хорошей вёрстке.

В былые времена, центрирование и выравнивание элементов были нудным делом и требовали комбинации из разных костылей.

CSS Flexbox поменял подход к выравниваю элементов. И теперь горизонтальное центрирование, также как и вертикальное стали очень простыми.

А комбинирование свойств позиционриования из Flexbox c text-align , может сделать ваши шаблоны куда привлекательнее без громоздких костылей.

Выравнивание по центру в 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), который в большей степени будет работать для одного элемента:

Related posts:

1. Как задать папку для загрузок
2. Как подключить вай фай на айфоне
3. Html css что это
4. Больше не работает на яндекс картах как убрать