How to center align horizontal

HTML

<div id="horizontal-menu">
      <ul>
            <li><a href='#'>Link 1</a></li>
            <li><a href='#'>Link 2</a></li>
            <li><a href='#'>Link 3</a></li>
            <li><a href='#'>Link 4</a></li>
      </ul>
</div>

CSS

<style type="text/css">
    .footer-menu { position: relative; left: -50%; float: right; }
    .footer-menu ul { position: relative; left: 50%; }
    .footer-menu ul li { display: block; float: left; position: relative; }
    .footer-menu ul li a { display: block; white-space: nowrap; }
</style>

 That's all folks