CSS: Won't center the UL LI horizontal menu

Question

CSS:

.homeBar li {
    float: center;
    display: inline;
    text-align: center;
    font-family: Tahoma;
    font-size: 13px;
    list-style: none;
}
.homeBar img {
    color: #94938e;
    margin-right: 30px;
    text-decoration: none;

}

HTML:

<ul class="homeBar">
    <li><a href="#"><img src="images/friends.png"></a></li>
    <li><a href="#"><img src="images/mail.png"></a></li>
</ul>

as you can see i tried float: center, but it wont center it..

Answer 1

If the widths of your elements (and thus, your list) are known, you could display the list as inline-block, and apply auto margins to it:

.homeBar li {
    width: /* Full width (calculate it manually) */;
    display: inline-block;
    margin: 0 auto;
}

The width used should be the width of the images, plus padding and margin, after any margin collapse.