Верх страницы
Время для прочтения: 0 мин. 0 сек.

Центрирование меню

Разработал для себя определенную систему: кроссбраузерную, валидную, семантичную. Одним из пунктов ее является меню, составленное из тегов ul > li. Хотелось бы поделится способом центрирования данного меню посередине экрана

HTML примера:

 
<div class="menu">
    <div class="container">
        <ul class="wrapper">
            <li><a href="#">Главная</a></li>
            <li><a href="#">О компании</a></li>
            <li><a href="#">Прайс</a></li>
            <li><a href="#">Заказать</a></li>
            <li><a href="#">Помощь</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
    </div>
</div>
 

CSS примера:

 
DIV.menu {
    width: 775px;
    position: relative;
    overflow: hidden;
    font-size: .8em;
    text-align: center;
    margin: 5px auto;
}
 
DIV.container {
    float: left;
    left: 50%;
    position: relative;
    text-align: center;
}
 
UL.wrapper {
    position: relative;
    left: -50%;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
 
UL.wrapper LI {
    float: left;
    padding: 10px;
    margin: 0;
}
 
UL.wrapper LI A {
    color: #3B6783;
    font-weight: bold;
    text-decoration: none;
}
 
Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы