[howto]: Центрирование меню, построенного на ul - li - Вопросы по CSS

Казалось бы задача проста, но на деле все оказывается иначе. text-align не помогает, margin:auto работает только при фиксированной ширине. Что делать? Решение достаточно старо, но кода у меня поменьше.

Выглядеть код должен примерно так


Что происходит? Сначала мы прибиваем все к правой границе браузера и блок (#mainmenu) гарантированно имеет ширину равную всей области экрана. Затем мы сдвигаем его на 50% влево (right:50%;), после правая граница оказывается ровно посреди экрана.

Затем вложенный блок (сам список) принудительно уводится в левую область родительского блока (#mainmenu). Так как все слои имеют номинальную ширину в 100% то на данный момент ширина у списка (ul) получается равной 150%, а его сдвиг вправо приводит к получению его 100%ой ширины. Таким образом он оказывается всегда по центру относительно своего родительского элемента.
Вообще все это навеяно вот этой статьей, но имхо моя вариация получше. 

замечания можете писать в моем "свежем" блоге

Пример того как это работает можно увидеть тут
Черная пунктирная линия в примере проходит на 50% экрана.

Нашел более простой и смешной способ выравнивания


P.S. Улучшил функционал с поддержкой ИЕ7

спс

спс

Код: css

#mainmenu ul {text-align:center;}
#mainmenu li {display:inline-block;}

Я внес поправки

Молодец, тролль засчитан.
Я тоже внес

Оба должны быть position:relative

всё работает 
 +