html - 使 HTML 菜单在屏幕上居中

Question

我在将菜单置于屏幕中央时遇到了一些问题。我认为将显示设置为 block ，并将左右边距设置为自动，会为我做这件事；然而，我错了。这是一个JSFiddle帮助显示问题。感谢您的帮助。

<ul id="menuList">
    <li><a href="index.html">Home</a></li>
    <li><a href="About.html">About</a></li>
    <li><a href="Contact.html">Contact</a></li>
</ul>


#menuList{
    display:block;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

#menuList ul{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#menuList li
{
    list-style: none;
    float: left;
    margin-right: 0.5em;
}

#menuList a
{
    display: block;
    width: 8em;
    color: black;
    text-decoration: none;
    text-align: center;
}

Answer 1

将菜单设置为 inline-block 并将父级设置为 text-align:center

JS Fiddle

将 body 替换为您的 parent id 或 class

body {
    text-align:center;
}
#menuList {
    display:inline-block;
}