html - 尝试将无序列表居中

Question

在我的网站上，我想要一个位于页面中央的水平菜单。因此，整个菜单应该居中。

此时，我可以创建一个水平列表，但列表仍然停留在左侧。我希望它居中。

有人可以告诉我要更改代码中的哪些内容以使其居中吗？

我的 HTML:

<div class=menu>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Home</a></li>
</ul>
</div>

我的 CSS:

ul {
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

div.menu{
    display: table;
}

div.menu a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60px;
    color: navy;
    background-color: #FF0000
}

li{
    float: left;
}

Answer 1

将 margin:auto 添加到您的 div.menu 以完成此操作

div.menu{
    display: table;
    margin:auto;
}

JSFiddle:http://jsfiddle.net/0xb7j9zc/