Выравнивание горизонтального списка (меню) по центру страницы

Новичкам кажется сложным выровнять горизонтальное меню (список) по центру html-страницы.
Как это делается с использованием чистого CSS?
Имеем такое горизонтальное меню на списках, выравнивание по центру .

Способ центрирования меню исходит из двух правил:
1. В относительном позиционировании, процент смещения зависит от ширины родителя.
2. Ширина родителя, к которому применено свойство float, будет соответствовать сумме длин дочерних плавающих элементов.

Применим к ul свойство float:left и его ширина будет равна сумме длин всех li которые находятся внутри. Затем применим к нему относительное позиционирование и сместим его вправо на 50%. Список сместится на половину ширины окна браузера. После этого применим относительное позиционирование к самим пунктам меню li и сместим их влево на 50%, но сейчас смещение произойдет не на половину ширины окна браузера, а наполовину ширины элемента ul. Таким образом мы получим горизонтальное меню, выровненное по центру окна браузера. Остался последний штрих. Из-за смещения элемента ul, могла появится горизонтальная полоса прокрутки, поэтому для обертывающего элемента div необходимо применить свойство overflow:hidden. Еще 1 штрих — к контейнеру div применяем свойство position:relative, чтоб решить проблемы кроссбраузерности в ие7 и ниже.

Получился такой CSS:

#foot-nav {float:left; width:100%; overflow:hidden;position:relative}
#foot-nav ul {margin:0;padding:0; float:left; position:relative; left:50%}
#foot-nav ul li {float:left;list-style:none; position:relative; right:50%}
#foot-nav ul li a {font-size: 10px;color: #686868;display:block;padding:10px 20px;;text-decoration:none;text-transform:uppercase;}
#foot-nav ul li a:hover {color: #111111;text-decoration:underline;}

Этот способ корректно отображается всеми популярными браузерами и с успехом проходит проверку на валидаторе.

Share this post:

Recent Posts

Leave a Comment