Как сделать по центру списки <li> в горизонтальном меню

Простые ссылки сделать по центру не составляет никаких проблем, но что делать, если нужно отцентровать горизонтальное меню с заранее неизвестной шириной?! Эту задачу мы сейчас и решим с помощью CSS, сначала посмотрим на HTML код:

<div id="out">
    <div id="in">
        <ul>
            <li><a href="">Главная</a></li>
            <li><a href="">Статьи</a></li>
            <li><a href="">Контакты</a></li>
        </ul>
    </div>
</div>

А теперь его величество CSS

#out {text-align:center; margin:0 auto; display:table;}
#in {display:table-cell;}
ul {float:left; margin:0; padding:0;}
li {float:left; margin:0 5px; padding:0 5px; list-style:none; border:1px solid #000;}

Этот код работает на все 100%, можете убедиться, посмотрев демо. Ну а красиво оформить вы и сами сможете.