title: Center horizontal list style menu
body: <p>I have the following code:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#main
  {
      width:100%;
      height:120px;
      border:solid 1px #efefef;
  }
  
  #links
  {
      background-color:#808080;
  }
  
  #links ul
  {
      margin:0px auto;
      padding:0px;
      list-style:none;
      background-color:#eee;
      height:30px;
  }
  
  #links ul li
  {
      float:left;
      margin:0px;
      list-style:none;
      padding:0px 10px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="links"&gt;
          &lt;ul&gt;
              &lt;li&gt;Link 1&lt;/li&gt;
              &lt;li&gt;Link 2&lt;/li&gt;
              &lt;li&gt;Link 3&lt;/li&gt;
              &lt;li&gt;Link 4&lt;/li&gt;
              &lt;li&gt;Link 5&lt;/li&gt;
              &lt;li&gt;Link 6&lt;/li&gt;
          &lt;/ul&gt;    
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The list items are dynamic so I can't really use fixed width on the #links layer and I want the list to be perfectly centered.  The above code doesn't work and I've a variety of methods but can't seem to get the list centered.</p>
  
  <p>I don't want to use a table partly because I hate using tables for menus and also I will have eventually have sub menu items that will also be horizontal.</p>
  
  <p>Any pointers?</p>
  
  <p>Thanks
  Steve</p>