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/

Answer 2

查看这个小提琴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;
}

Answer 3

我假设您希望将菜单居中（将其对齐到页面中间）。一种方法，我确定那里有一些方法，就是把菜单包裹起来。＆＃39;将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/

试图将无序列表居中

3 个答案: