Разработал для себя определенную систему: кроссбраузерную, валидную, семантичную. Одним из пунктов ее является меню, составленное из тегов 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/