title: How do I center align horizontal <UL> menu?
body: <p>I need to center align a horizontal menu.<br>
  I've tried various solutions, including the mix of <code>inline-block</code> / <code>block</code> / <code>center-align</code> etc., but haven't succeeded.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="topmenu-design"&gt;
      &lt;!-- Top menu content: START --&gt;
      &lt;ul id="topmenu firstlevel"&gt;                                                                                       
        &lt;li class="firstli" id="node_id_64"&gt;&lt;div&gt;&lt;a href="#"&gt;&lt;span&gt;Om kampanjen&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
        &lt;li id="node_id_65"&gt;&lt;div&gt;&lt;a href="#"&gt;&lt;span&gt;Fakta om inneklima&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
        &lt;li class="lastli" id="node_id_66"&gt;&lt;div&gt;&lt;a href="#"&gt;&lt;span&gt;Statistikk&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- Top menu content: END --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I know how to center align the <code>ul</code> within the <code>div</code>. That can be accomplished using Sarfraz's suggestion.
  But the list items are still floated left within the <code>ul</code>.</p>
  
  <p>Do I need Javascript to accomplish this?</p>