如何用css集中列表？

Question

我有一个清单和一些问题。我无法集中< li >，它们始终是一致的。以下是它们的示例：

现在，我正试图让他们：

有人能帮我解决这个问题吗？这是我正在使用的代码。

HTML

<div class="header_middle_menu">
    <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
        <li><a href="#">F</a></li>
        <li><a href="#">G</a></li>
        <li><a href="#">H</a></li>
    </ul>   
</div>

CSS

.header_middle_menu{
    float: left;
    margin-left: 50px;
    margin-top: 15px;
    width: 490px;
}

.header_middle_menu li{
    float: left;
}

.header_middle_menu ul{
    list-style: none;
}

.header_middle_menu ul li{
    background: #FB5904;
    display: inline;
    margin: 5px;
    padding: 7px;
}

.header_middle_menu ul li a{
    color: #FFFFFF;
    font-family: arial;
    font-size: 13px;
    text-decoration: none;
}

.header_middle_menu li:hover ul{
    display: block;
}

Answer 1

你可以做以下三件事：

• 将text-align:center;添加到.header_middle_menu
• 从float: left;
移除.header_middle_menu li
• 在display: inline;
中将display: inline-block;更改为.header_middle_menu ul li

<强> jsFiddle example