Create a CSS menu where LI elements are centered

I found out that it wasn’t that easy to create a CSS menu with the LI elements in the center.

The first way I solved it was by float the LI-elements and change the UL element to display:table or display:inline. That worked, but not for Internet Explorer. With a little help I got it working with Internet Explorer as well.

How it looks like

No preview at the moment.

The solution

The UL element is set to text-align:center and the LI elements is set to display:inline. No floating was required. Thanks Paolo Bergantino at stackoverflow.com who helped me on this one.

I choose to make the stylesheet within the same page to make it easier to test.

HTML

<div id="menu-centered">
     <ul>
          <li><a href="">My first item</a></li>
          <li><a href="">My second item</a></li>
          <li><a href="">My third item</a></li>
          <li><a href="">My fourth item</a></li>
          <li><a href="">My fifth item</a></li>
     </ul>
</div>

CSS

<style type="text/css" media="screen">
     body {
          margin: 0;
     }
     #menu-centered {
          background: #0075B8;
          padding: 10px;
          margin-bottom: 10px;
      }
      #menu-centered ul {
           margin: 0;
           padding: 0;
           text-align: center;
      }
      #menu-centered li {
           display: inline;
           list-style: none;
           padding: 10px 5px 10px 5px;
      }
      #menu-centered a {
           font: normal 12px/24px Arial;
           color: #fff;
           text-decoration: none;
           padding: 5px;
           background: #57a8d6;
      }
      #menu-centered a:hover {
           background: #5fb8eb;
      }
 </style>