Задать вопрос
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;
}
  • Вопрос задан
  • 19106 просмотров
Комментировать
Подписаться 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 комментарий
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Смонтировать видео с выставки
22 нояб. 2024, в 11:53
3000 руб./за проект
Настроить и запустить сервер World of Warcraft 3.3.5a
22 нояб. 2024, в 11:51
20000 руб./за проект
Создать личный кабинет Битрикс
22 нояб. 2024, в 11:50
200000 руб./за проект
Ещё заказы