如何居中对齐水平菜单？

Question

我需要居中对齐水平菜单。
我尝试了各种解决方案，包括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>

更新

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

我需要Java语言来完成此操作吗？

Answer 1

前提很简单，基本上只涉及一个无宽度的浮动包装，该浮动包装浮动到左侧，然后从屏幕上移到左侧的宽度位置。左：-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>