How can I center an unordered list with dynamic content within div?

http://stackoverflow.com/questions/8734503/how-can-i-center-an-unordered-list-with-dynamic-content-within-div

by Wexcode

HTML

<nav>
    <ul>
        <li><a href="#">Element 1</a></li>
        <li><a href="#">Element 2</a></li>
        <li><a href="#">Element 3</a></li>
        <li><a href="#">Element 4</a></li>
    </ul>
</nav>

CSS

nav { overflow: hidden; }
ul { 
    position: relative;
    float: left;
    left: 50%;
    padding: 0;
    list-style: none; }
li { 
    position: relative;
    float: left;
    right: 50%;
    margin: 0 5px; }