Html 正在尝试将无序列表居中

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

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

有人能告诉我如何更改代码以使其居中吗

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

看看这把小提琴

HTML

---

我假设您希望将菜单居中（将其与页面中间对齐）。一种方法是将“menu”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>

---

下面是一个示例：

将

边距：auto

添加到

div.menu

以完成此操作

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

---

JSFiddle:

你的问题是什么？它有用吗？若否，原因为何？你得到了什么，预期的结果是什么？我不知道你想问什么。试试这个：。菜单ul{display:table；margin:0auto；}是的，对不起。将我的问题编辑为更多clear@shadeed9这完全改变不了什么，我不会使用

align=“center”

，而是使用

margin:auto:

或

margin:0auto

，但是你的确实有效：）这很有效，谢谢！没想到答案会这么简单

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

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

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