как сделать меню посередине
Как разместить элементы списка горизонтально или горизонтальное меню с помощью CSS
Приветствую Вас, уважаемые читатели блога webcodius! Обязательным элементом практически любого сайта является меню. Поэтому если Ваш сайт имеет больше одной страницы, то без навигационного меню скорей всего не обойтись. Ведь без меню пользователю будет трудно найти нужные ему странички.
Для начала создадим обычный маркированный список, содержащий пункты нашего меню:
По умолчанию без каких-либо правил CSS он будет выглядеть следующим образом:
Как видно элементы списка выстроились вертикально друг под другом и если нам нужно вертикальное меню, то если стилизовать нужным образом ссылки (добавить фоновый цвет, рамки, отступы, изменить шрифт) можно получить привлекательную навигационную панель.
Теперь элементы списка будут расположены по горизонтали:
В итоге получится такое привлекательное меню:
Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.
Горизонтальное меню по центру
Выравнять меню по центру можно так:
Горизонтальное меню с пунктами одинаковой ширины
Чтобы сделать все пункты меню одинакового размера указываем для них нужный размер. Только главное чтобы в сумме размеры пунктов не превышали размер всей панели. Можно сделать так:
Если добавить немного трансформации:
то получим меню со скошенными углами:
На этом все, пробуйте и предлагайте свои варианты в комментариях. Ссылка на исходный файл с примерами. До новых встреч!
Горизонтально центрированное меню с использованием только CSS
Задача центрирования горизонтального меню может оказаться не такой уж простой, особенно для новичков в CSS. Поиск решений приводит к весьма ограниченному списку методов, основная часть которых полагается на трюки CSS, JavaScript или использование нестандартных правил, которые поддерживаются не всеми браузерами. В данном уроке мы разберем метод центрирования горизонтального меню, который использует только стандартные правила CSS и работает во всех браузерах.
Пример центрированного меню
Ниже приведено горизонтальное центрированное в данной колонке меню, в котором активизирована вторая закладка. Можно попробовать изменить размер окна браузера или страницы, чтобы убедиться в том, что меню всегда остается центрированным и рабочим.
На демонстрационной странице можно увидеть несколько вариантов оформления горизонтально центрированного меню. Любой из них можно использовать в своих проектах.
Разметка HTML
Все меню, примеры которых приводятся в данном уроке, используют простую структуру. Это обыкновенный неупорядоченный список ссылок, помещенный в элемент div.
Код CSS центрированного меню
Ниже приводится полный код CSS, с помощью которого центрируется меню. А объяснения принципа работы приводятся далее в уроке.
Как работает метод центрирования
Действие метода основано на относительном позиционировании плавающих блочных элементов один в другом. Для начала посмотрим, как изменяется размер элементов при смещении.
Элемент div без смещения
Элемент div (блочный) без смещения растягивается на всю доступную ему ширину.
Элемент div со смещением влево
Но если мы будем смещать элемент div влево, он автоматически будет ужиматься до размеров своего содержимого. Сжатие является ключевым моментом в реализации данного метода центрирования меню. Оно помогает перемещать меню в правильную позицию.
Стандартное выровненное влево меню
Возьмем стандартное выровненное влево меню и будем шаг за шагом его переделывать. Для наглядности пункты окрашены в разные цвета, так что сразу понятно, что куда вложено.
Обратите внимание на следующие моменты:
Смещаем положение неупорядоченного списка
Сдвигаем положение всех элементов меню
Осталось только сдвинуть все элементы li влево на 50%. Это 50% ширины нашего элемента ul (контейнера, который содержит меню). Таким образом, закладки смещаются точно на центр окна.
Несколько важных замечаний
При использовании данного метода центрирования надо помнить о нескольких важных моментах:
Заключение
Предложенное решение совместимо со всеми браузерами, не использует JavaScript и поддерживает изменяемый размер текста.
Как выровнять по центру горизонтальное меню?
мне нужно выровнять по центру горизонтальное меню.
Я пробовал различные решения, в том числе смесь inline-block / block / center-align etc. но не преуспели.
обновление
нужен ли мне Javascript для добиться этого?
16 ответов
предпосылка проста и по существу как раз включает widthless завертчицу поплавка которая поплавана к левому и после этого перенесена с экрана к левому положению ширины:относительный; левый:-50%. Затем вложенный внутренний элемент реверсируется и применяется относительное положение +50%. Это приводит к тому, что элемент оказывается мертвым в центре. Относительный располагать поддерживает подачу и позволяет другому содержанию к течь под ним.
это работает для меня. Если я правильно понял ваш вопрос, вы можете попробовать.
С CSS3 flexbox. Простой.
Это самый простой способ я нашел. Я использовал ваш html. Заполнение-это просто сброс настроек браузера по умолчанию.
вот хорошая статья о том, как это сделать довольно твердым способом, без каких-либо хаков и полной поддержки кросс-браузера. Работает для меня:
Как и многие из вас, я боролся с этим на некоторое время. Решение в конечном счете было связано с div, содержащим UL. Все предложения по изменению заполнения, ширины и т. д. на ул это не подействовало, но подействовало следующее.
о margin:0 auto; на содержащем div. Я надеюсь, что это помогает некоторым людям, и спасибо всем, кто уже предложил это в сочетании с другими вещами.
вообще говоря, способ центрирования элемента черного уровня (например,
- ) С помощью margin:auto; собственность.
маркеры ID и NAME должны начинаться с буква ([A-Za-z]) и может следовать любым количеством букв, цифр (2), дефисов («-«), символов подчеркивания («_»), колоны («:»), и периоды («.»).
я использовал свойство display: inline-block: решение состоит в использовании оболочки с фиксированной шириной. Внутри, блок ul с встроенным блоком для дисплея. Используя это, ul просто берет ширину для реального контента! и, наконец, margin: 0 auto, чтобы центрировать этот встроенный блок =)
Как выровнять горизонтальное меню по центру?
Здравствуйте уважаемые посетители моего блога! Сегодня речь пойдет о главном горизонтальном меню сайта, а именно как выровнять горизонтальное меню по центру. Да, на первый взгляд, что тут сложного — задал нужные отступы, подогнал и все. Но тут есть свои нюансы. Сайт, в первую очередь, это динамика, т.е. на сайте постоянно появляется новый контент, появляются какие то новые блоки с информацией и т.п. Так могут и появляться/исчезать некоторые пункты в главном меню. С учетом этого всего нужно добиться того, что при добавлении или удалении пункта меню, меню у нас остается все также по центру. Конечно, не всегда обязательно его центрировать, все зависит от дизайна. Но если все же у вас подразумевается ставить горизонтальное меню по центру, то применив несколько несложных трюков в css мы можем добиться нужного результата.
Горизонтальное меню по центру без выпадающих пунктов
Сначала разберем на примере горизонтального меню, которое не имеет выпадающих пунктов.
Html-код
Css-код
Разберем все по порядку, здесь все просто. Мы создаем контейнер «mainmenu», куда помещаем наше меню в виде неупорядоченного списка.
Теперь дело идет за стилями css. Сначала мы сбрасываем на ноль все поля и отступы для всех браузеров. Далее при помощи свойства «float:left» мы смещаем наш неупорядоченный список влево и далее относительным позиционированием смещаем его на 50% вправо. Ширина списка «ul» будет равна сумме длин всех пунктов «li», которые находятся внутри него. Таким образом, если мы мысленно поделим окно браузера пополам, то наше меню уйдет вправо от линии разделения. Чтобы выровнять мы применим к пунктам «li» также относительное позиционирование и сместим их влево на 50%, указав свойство «left:-50%». Да и еще, чуть не забыл, нашему контейнеру «mainmenu» нужно обязательно указать свойство «overflow:hidden», иначе мы получим горизонтальную полосу прокрутки.
Вот и все, теперь наше меню выровнялось по центру. Теперь можете добавлять, хоть убавлять пункты, на позиционирование это не повлияет. Вы также можете использовать это меню на своих сайтах, просто изменив стили под ваш дизайн.
Горизонтальное меню по центру с выпадающими пунктами
Теперь разберем многоуровневое меню с выпадающими подпунктами. Здесь ситуация несколько иначе и несколько сложнее, т.к. в первом случае у нас подпункты выпадать не будут, потому что мы указали блоку «mainmenu» свойство — «overflow:hidden». Это говорит, что элементы за пределами данного блока показываться не будут. Но выход есть.
Итак, я изменил предыдущий код и удалил из него свойство «overflow:hidden».
Html-код
CSS-код
Теперь у нас меню выставлено по центру и при наведении выпадают подпункты.
Выравнивание меню по центру с помощью flexbox
Выровнять меню по центру можно также, применив новое правило в css — flexbox. Вообще трюкам с flexbox я хочу посвятить отдельный пост, оно того стоит, очень упрощает жизнь верстальщику. В общем, здесь не будем углубляться… Я приведу здесь только код css для меню с выпадающими пунктами. HTML код тот же, что и выше.
Код CSS
Как видим, изменились правила только для родительского списка — #mainmenu ul. Единственное, пришлось добавить префиксы для предыдущих версий браузеров. Отмечу, что правило flexbox корректно понимают только современные браузеры. Если вы ориентируетесь на более старые браузеры, то вариант с flex’ом придется отложить. Какие именно браузеры хорошо понимают flexbox можете посмотреть здесь.
Вот и все. Если у вас возникли вопросы задавайте их в комментариях. Желаю удачи!
Выравниваем блок по центру страницы
Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.
Вариант 1. Отрицательный отступ.
Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.
Вариант 2. Автоматический отступ.
Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.
Вариант 3. Таблица.
Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.
Чтобы добавить скролл в данный пример, придётся добавить в конструкцию ещё один элемент.
Пример: jsfiddle.net/serdidg/fk5nqh52/3.
Вариант 4. Псевдо-элемент.
Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.
либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:
Вариант 5. Flexbox.
Одним из самых простых и элегантных способов является использования flexbox. Но имейте ввиду, что центральное позиционирование сохраняется даже если родительский блок меньше дочернего, последний будет выходить за рамки и обрезаться.
В случае, если при уменьшении родительского блока дочерний не должен обрезаться по краям, используйте авто маржины:
Вариант 6. Transform.
Вариант 7. Кнопка.
Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.