如何居中对齐水平<UL>菜单？

Question

如何居中对齐水平<UL>菜单？

我需要居中对齐水平菜单。
我已经尝试了各种解决方案，包括混合inline-block/ block/ center-align等，但都没有成功。

这是我的代码：

<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

我知道如何居中对齐ul内div。这可以使用Sarfraz的建议来完成。但是列表项目仍然在内部浮动ul。

我需要Javascript来完成这个吗？

Answer 1

使用CSS3 flexbox。简单。ul&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;justify-content:&nbsp;center; } ul&nbsp;li&nbsp;{ &nbsp;&nbsp;padding:&nbsp;0&nbsp;8px; }