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

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>

更新

我知道如何在div 中居中对齐ul。这可以使用 Sarfraz 的建议来实现。 但是列表项仍然在ul 中向左浮动。

我需要 Javascript 来完成这项工作吗？

Answer 1

来自http://pmob.co.uk/pob/centred-float.htm：

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

Answer 2

这对我有用。如果我没有误解你的问题，你可以试一试。

    div#centerDiv {
        width: 100%;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

Answer 3

使用 CSS3 弹性框。很简单。

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}

Answer 4

这是我找到的最简单的方法。我用了你的html。填充只是为了重置浏览器默认值。

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}

<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>

Answer 5

这是一篇很好的文章，介绍了如何以坚如磐石的方式做到这一点，没有任何技巧和完整的跨浏览器支持。为我工作：

--> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Answer 6

试试这个：

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}