html - 如何使用 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 示例