Html center div menu

Выравниваем блок по центру страницы

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.

Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.

Вариант 1. Отрицательный отступ.

Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.

Вариант 2. Автоматический отступ.

Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.

Вариант 3. Таблица.

Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.

Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/xkb615mu.

Вариант 4. Псевдо-элемент.

Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.

либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:

Вариант 5. Flexbox.

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

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

Вариант 6. Transform.

Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script’а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .

Вариант 7. Кнопка.

Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.

Бонус

Используя идею 4-го варианта, можно задавать внешние отступы для блока, и при этом последний будет адекватно отображаться в окружении скроллбаров.
Пример: jsfiddle.net/serdidg/ugnp8ry7.

Так же можно выравнивать картинку по центру, и в случае если картинка больше родителя, масштабировать её по размеру родителя.
Пример: jsfiddle.net/serdidg/Lhpa1s70.
Пример с большой картинкой: jsfiddle.net/serdidg/tor2yudn.

Источник

Как выровнять горизонтальное меню по центру?

Здравствуйте уважаемые посетители моего блога! Сегодня речь пойдет о главном горизонтальном меню сайта, а именно как выровнять горизонтальное меню по центру. Да, на первый взгляд, что тут сложного — задал нужные отступы, подогнал и все. Но тут есть свои нюансы. Сайт, в первую очередь, это динамика, т.е. на сайте постоянно появляется новый контент, появляются какие то новые блоки с информацией и т.п. Так могут и появляться/исчезать некоторые пункты в главном меню. С учетом этого всего нужно добиться того, что при добавлении или удалении пункта меню, меню у нас остается все также по центру. Конечно, не всегда обязательно его центрировать, все зависит от дизайна. Но если все же у вас подразумевается ставить горизонтальное меню по центру, то применив несколько несложных трюков в css мы можем добиться нужного результата.

Горизонтальное меню по центру без выпадающих пунктов

Html-код

Css-код

*, *::after, *::before < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >#mainmenu < background: #444; position: relative; overflow: hidden; height: 40px; margin: 30px 0 >#mainmenu ul < list-style: none; margin: 0; padding: 0; position: relative; left: 50%; float: left; font: 14px Arial, Helvetica, sans-serif; height: 40px >#mainmenu ul li < position: relative; left: -50%; float: left; margin: 0 10px; height: 40px >#mainmenu ul li a < color: #fff; display: block; text-decoration: none; padding: 0 15px; line-height: 40px; >#mainmenu ul li a:hover

Разберем все по порядку, здесь все просто. Мы создаем контейнер «mainmenu», куда помещаем наше меню в виде неупорядоченного списка.

Теперь дело идет за стилями css. Сначала мы сбрасываем на ноль все поля и отступы для всех браузеров. Далее при помощи свойства «float:left» мы смещаем наш неупорядоченный список влево и далее относительным позиционированием смещаем его на 50% вправо. Ширина списка «ul» будет равна сумме длин всех пунктов «li», которые находятся внутри него. Таким образом, если мы мысленно поделим окно браузера пополам, то наше меню уйдет вправо от линии разделения. Чтобы выровнять мы применим к пунктам «li» также относительное позиционирование и сместим их влево на 50%, указав свойство «left:-50%». Да и еще, чуть не забыл, нашему контейнеру «mainmenu» нужно обязательно указать свойство «overflow:hidden», иначе мы получим горизонтальную полосу прокрутки.

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

Горизонтальное меню по центру с выпадающими пунктами

Теперь разберем многоуровневое меню с выпадающими подпунктами. Здесь ситуация несколько иначе и несколько сложнее, т.к. в первом случае у нас подпункты выпадать не будут, потому что мы указали блоку «mainmenu» свойство — «overflow:hidden». Это говорит, что элементы за пределами данного блока показываться не будут. Но выход есть.

Html-код

CSS-код

*, *::after, *::before < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >#mainmenu < position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; float: left; width: 100%; z-index: 10 >#mainmenu ul < clear: left; position: relative; right: 50%; height: 40px; float: right; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0 >/** Основные пункты **/ #mainmenu > ul > li < position: relative; left: 50%; float: left; height: 40px; padding: 0; margin: 0 >#mainmenu > ul > li > a < border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; >#mainmenu > ul > li:first-child > a < border: none >#mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a < color: #fff >#mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active < background: #666 >/* Выпадающие подпункты */ #mainmenu ul li ul < position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px >#mainmenu > ul > li ul li < background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; >#mainmenu ul li ul li a < border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; >#mainmenu ul li ul li.parent a < position: relative; >#mainmenu ul li ul > li.parent > a::before < border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; >#mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover < background-color: #444 >#mainmenu ul li:hover ul, #mainmenu ul li.hover ul < display: block >/* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul < opacity: 1; visibility: visible; margin: 0; >#mainmenu ul li ul li ul

Выравнивание меню по центру с помощью flexbox

Выровнять меню по центру можно также, применив новое правило в css — flexbox. Вообще трюкам с flexbox я хочу посвятить отдельный пост, оно того стоит, очень упрощает жизнь верстальщику. В общем, здесь не будем углубляться… Я приведу здесь только код css для меню с выпадающими пунктами. HTML код тот же, что и выше.

Код CSS

*, *::after, *::before < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >#mainmenu < position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; width: 100%; z-index: 10 >#mainmenu ul < display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 40px; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; >/** Основные пункты **/ #mainmenu > ul > li < position: relative; height: 40px; padding: 0; margin: 0 >#mainmenu > ul > li > a < border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; >#mainmenu > ul > li:first-child > a < border: none >#mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a < color: #fff >#mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active < background: #666 >/* Выпадающие подпункты */ #mainmenu ul li ul < position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px >#mainmenu > ul > li ul li < background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; >#mainmenu ul li ul li a < border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; >#mainmenu ul li ul li.parent a < position: relative; >#mainmenu ul li ul > li.parent > a::before < border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; >#mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover < background-color: #444 >#mainmenu ul li:hover ul, #mainmenu ul li.hover ul < display: block >/* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul < opacity: 1; visibility: visible; margin: 0; >#mainmenu ul li ul li ul

Как видим, изменились правила только для родительского списка — #mainmenu ul. Единственное, пришлось добавить префиксы для предыдущих версий браузеров. Отмечу, что правило flexbox корректно понимают только современные браузеры. Если вы ориентируетесь на более старые браузеры, то вариант с flex’ом придется отложить. Какие именно браузеры хорошо понимают flexbox можете посмотреть здесь. Вот и все. Если у вас возникли вопросы задавайте их в комментариях. Желаю удачи!

Источник