Задать вопрос
dergus
@dergus
html

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

Нужно, чтобы горизонтальное меню (класс main-menu) было по центру.
margin:0 auto не помогает. Вот что получается jsbin.com/gurun/1
HTML:
<body>
 <ul class="main-menu">
            <li><a href="#first">First</a></li>
            <li><a href="#second">Second</a></li>
            <li><a href="#third">Third</a></li>
            <li><a href="#fourth">Fourth</a></li>
            <li><a href="#fifth">Fifth</a></li>
            <li><a href="#sixth">Sixth</a></li>
            <li><a href="#seventh">Seventh</a></li>
        </ul>
</body>

body{
    margin: 0 ;
    padding: 0;
}


.main-menu{
    width: 1000px;
    list-style: none;
    padding: 0;
    font-size: 24px;
    margin: 0 auto;
}
.main-menu li{
    display: block;
    margin: 0;
    padding: 0;
    float: left;
    
}
.main-menu a{
    color: white;
    background: gray;
    text-decoration: none;
    padding: 10px;
    margin: 0;
    outline: none;
}
.main-menu a:hover{
    background: #2b2b2b;
}
  • Вопрос задан
  • 18602 просмотра
Комментировать
Подписаться 5 Оценить Комментировать
Решения вопроса 1
@ikeagold
jsbin.com/fovujoti/2
чуть магии
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Aliance
@Aliance
чтобы работал марджин, нужна адекватная ширина у родителя. в данном примере у блока ul ширина 1000 пикселей, хотя его реальная ширина - 550. попробуйте изменить и посмотрите на результат. кроме того нужно очистить потом (clearfix, например), чтобы размеры ul считались правильно.
Ответ написан
Комментировать
Комментировать
@ultrbi4
Меню центрируется, просто у Вас указана ширина в 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{
    display: inline-block;
    margin: 0;
    padding: 0;
}


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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Перекрасить 2 вкладыш для типографии в новый цвет
18 апр. 2024, в 15:55
500 руб./за проект
Починить лайки и удаление сторис на React Native
18 апр. 2024, в 15:52
2500 руб./за проект
Требуется переводчик на португальский
18 апр. 2024, в 15:39
500 руб./в час
Ещё заказы