尝试居中一个无序列表

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

- gooper20

---

你的问题是什么？它能正常工作吗？如果不能，为什么？你得到了什么，期望的结果是什么？我不知道你想问什么。 - tckmn

尝试这个：.menu ul {display:table; margin: 0 auto;} - shadeed9

抱歉，我编辑了我的问题以使其更清晰。 - gooper20

@shadeed9 这完全没有改变 - gooper20

Answer 1

将 margin:auto 添加到您的 div.menu 中以实现此目的。

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

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

- Simply Craig

---

这个可行，谢谢！从没想过答案会这么简单。 - gooper20

Answer 2

看看这个 jsfiddle http://jsfiddle.net/ByShine/33sz6nrt/4/

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;
}
ul li {
    display: inline-block;
}

- Aaron

Answer 3

我假设您希望将菜单居中（将其与页面中央对齐）。一种方法，我相信还有其他几种方法，是将“菜单”div标签包装到另一个div标签中，并将align属性设置为center，如下所示：

<div align="center">
    <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>
</div>

这是一个例子：http://jsfiddle.net/q9ae01qe/

- Qrious

---

我不会使用 align="center"，而是使用 margin:auto: 或者 margin:0 auto，不过你的确可以用 :) - Simply Craig