Выравнивание навигации по середине
Автор: Евгений Рыжков Дата публикации:
Задача
Имеем навигацию в виде списка (<ul>) на сайте (например главное меню), состоящую из заранее неизвестного количества элементов (<li>). Нужно это меню выровнять по середине, относительно родителя:
Решение
HTML код:
<div class="parent">
<ul>
<li><a href="#">Home page</a></li>
<li><a href="#">About company</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">About war</a></li>
</ul>
</div>
CSS:
.parent {
padding: 20px 0;
background: #6699FF;
}
.parent ul {
text-align: center;
}
.parent li {
display: inline;
margin-left: 20px;
}
.parent a {
color: #fff;
}
.parent li:first-child, li.first-child {
margin: 0; /* убираем отступ у первого элемента, чтобы было дейсвительно по середине */
}
* html .parent li {
z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1,
this == parentNode.firstChild ? (className += " first-child") : 0 /* добавляем нужный класс первому элементу */
)
}
Результат.Проверено в:
Заметка
При этом коде не важно сколько пунктов будет в меню, оно (меню) будет по центру, даже если пунктов меню будет более, чем на одну строку.