How can I centralize a list with css?

Question

I have a list and some problems. I can't centralize < li >, they are always aligned. Here's an example of how they are:

Now, as I'm trying to let them:

Could anyone help me solve this problem please? Here the code I'm using.

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

You can do these three things:

• Add text-align:center; to .header_middle_menu
• Remove float: left; from .header_middle_menu li
• Change display: inline; to display: inline-block; in .header_middle_menu ul li

jsFiddle example