title: How to horizontally center an unordered list of unknown width?
body: <p>It is common to have a set of links in a footer represented in a list, such as:</p>
  
  <pre><code>&lt;div id="footer"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want everything inside div#footer to be centered horizontally.  If it was a paragraph, you would just easily say: <code>p { text-align: center; }</code>.  Or if I knew the width of the <code>&lt;ul&gt;</code> I could just say <code>#footer ul { width: 400px; margin: 0 auto; }</code>.</p>
  
  <p>But how do you center the unordered list items without setting a fixed width on the <code>&lt;ul&gt;</code>?</p>
  
  <p>EDIT: clarification - the list items should be next to each other, not below.</p>