Как сделать меню по центру css

Как сделать — Меню в навигации по центру

Узнать, как создать панель навигации с ссылкой меню и логотипом по ценру.

Ссылка меню по центру

Создание верхней панели навигации

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Example

/* Добавить черный цвет фона для верхней навигации */
.topnav position: relative;
background-color: #333;
overflow: hidden;
>

/* Стиль ссылок внутри панели навигации */
.topnav a float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>

/* Изменение цвета ссылок при наведении курсора */
.topnav a:hover background-color: #ddd;
color: black;
>

/* Добавление цвета к активной/текущей ссылке */
.topnav a.active background-color: #4CAF50;
color: white;
>

/* Центрированный раздел внутри верхней навигации */
.topnav-centered a float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>

/* Выровненный по правому краю раздел внутри верхней навигации */
.topnav-right float: right;
>

/* Адаптивное меню навигации — отображение ссылок друг на друга, а не рядом друг с другом (для мобильных устройств) */
@media screen and (max-width: 600px) .topnav a, .topnav-right float: none;
display: block;
>

.topnav-centered a position: relative;
top: 0;
left: 0;
transform: none;
>
>

Совет: Чтобы создать удобные для мобильных устройств, отзывчивые навигационные панели, прочитайте наш учебник Как иделать — Отзывчивую верхнюю навигацию.

Совет: Зайдите на наш учебник CSS Навигации чтобы узнать больше о навигационных барах.

Выровнять меню по центру по горизонтали и убрать list style

так выглядит при тесте:

Отслеживать
33.9k 25 25 золотых знаков 130 130 серебряных знаков 222 222 бронзовых знака
задан 27 авг 2015 в 3:41
13 1 1 золотой знак 1 1 серебряный знак 3 3 бронзовых знака
Немного отредактировал ответ, надеюсь что смысл сохранил.
27 авг 2015 в 6:42
Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).
27 авг 2015 в 12:56

2 ответа 2

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

#nav < background: #345; position: fixed; left: 0; top: 0; width: 100%; height:50px; text-align: center; display: inline; vertical-align:middle; >#nav a < text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 19px; color:#FFF; padding: 5px; >#nav a:hover < background: #FFF; color: #345; >ul < margin: 0; padding: 12px; list-style: none; >li

Отслеживать
ответ дан 27 авг 2015 в 7:11
Узбек Баха Узбек Баха
2,548 4 4 золотых знака 20 20 серебряных знаков 45 45 бронзовых знаков
спасибо, почти то что нужно) как сделать фон на всю ширину, а не только на кнопки?
27 авг 2015 в 17:55
@Valeryyy обновил ответ
1 сен 2015 в 11:23

#nav < display: block; position: relative; >#nav ul < width:300px; margin:0 auto; display:block; >#nav ul li a < background-color: #FFF; text-align: left; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000; >#nav ul li

Отслеживать
ответ дан 27 авг 2015 в 6:56
Aslan Kussein Aslan Kussein
1,776 2 2 золотых знака 14 14 серебряных знаков 35 35 бронзовых знаков

html
css
меню

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

Читать:

Как открыть boot menu на ноутбуке acer

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

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

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

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

Как выровнять меню по центру? [перемещено] — Вопросы по 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.

Как сделать меню по центру?

Aliance

чтобы работал марджин, нужна адекватная ширина у родителя. в данном примере у блока ul ширина 1000 пикселей, хотя его реальная ширина — 550. попробуйте изменить и посмотрите на результат. кроме того нужно очистить потом (clearfix, например), чтобы размеры ul считались правильно.

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать

Меню центрируется, просто у Вас указана ширина в 1000px, а количество элементов списка не набирается на эту ширину и они выравниваются по левому краю и тут возникает «оптический обман» ).

1) Стилизовать .main-menu (указав, например, ему фон)
2) Выровнять элементы списка относительно родителя

.main-menu < width: 1000px; list-style: none; padding: 0; font-size: 24px; margin: 0 auto; text-align: center; >.main-menu li

3) Либо подогнать ширину .main-menu под сумму width всех элементов списка.

Ответ написан более трёх лет назад
Нравится 2 1 комментарий
SirMustache @SirMustache

Еще можно задать
.main-menu
и перенести значение в
.main-menu li < font-size: 24px;>
чтобы убрать отступы между inline элементами.
Или отрицательный margin.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

JavaScript
+4 ещё

Не работает feedback форма РНР?

1 подписчик
2 минуты назад
3 просмотра