如何居中对齐水平<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 {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}