megafon4u.ru

Многим новичкам кажется очень сложным выровнять горизонтальное меню (пейджер) по центру веб-страницы. Из-за этого появилось много вариантов центрирования с помощью хаков и с использованием яваскрипт-программирования. На самом деле все намного проще. Это делается с использованием чистого CSS. Необходимо немного разобраться с относительным позиционированием и с правилом float. Итак, имеем html-код:

<div>
   <ul>
	  <li><a href="#">Вкладка один</a></li>
	  <li><a href="#">Вкладка два</a></li>
	  <li><a href="#">Вкладка три</a></li>
	  <li><a href="#">Вкладка четыре</a></li>
   </ul>
</div>

Для начала, применим обычные правила CSS, чтоб выстроить меню по горизонтали:

div {border-bottom:1px solid orange; float:left; width:100%}
ul {margin:0;padding:0;}
ul li {float:left;list-style:none;}
ul li a {display:block;padding:5px;text-decoration:none; border-right:1px solid #fff;background:yellow}

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

div {border-bottom:1px solid orange; float:left; width:100%; overflow:hidden;position:relative}
ul {margin:0;padding:0; float:left; position:relative; left:50%}
ul li {float:left;list-style:none; position:relative; right:50%}
ul li a {display:block;padding:5px;text-decoration:none; border-right:1px solid #fff;background:yellow}

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