Разработал для себя определенную систему: кроссбраузерную, валидную, семантичную. Одним из пунктов ее является меню, составленное из тегов 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; }
Источник: https://www.kobzarev.com/programming/centered-menu/