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

Нужно, чтобы горизонтальное меню (класс 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;
}
  • Вопрос задан
  • 13266 просмотров
Пригласить эксперта
Ответы на вопрос 2
чтобы работал марджин, нужна адекватная ширина у родителя. в данном примере у блока 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 всех элементов списка.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы