[解決済み] How do I center align horizontal <UL> menu?

Question

I need to center align a horizontal menu.

I've tried various solutions, including the mix of inline-block / block / center-align etc., but haven't succeeded.

Here is my code:

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

UPDATE

I know how to center align the ul within the div . That can be accomplished using Sarfraz's suggestion. But the list items are still floated left within the ul .

これを実現するためには、Javascriptが必要なのでしょうか？

どのように解決するのですか？

から http://pmob.co.uk/pob/centred-float.htm :

前提は単純で、基本的には幅のないフロートラッパーを左にフロートさせ、画面外の左幅にシフトさせるだけです。position:relative; left:-50%です。次に、ネストされた内部要素が反転され、+50%の相対位置が適用されます。これは、要素を中央に配置する効果があります。相対位置は流れを維持し、他のコンテンツが下に流れることを可能にします。

コード

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>