CSS: не будет центрировать горизонтальное меню UL LI

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>

как видите, я попробовал float: center, но он не будет центрирован ..

Answer 1

Если ширина ваших элементов (и, следовательно, вашего списка) известна, вы можете отобразить список как inline-block и применить к нему поля auto:

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

Используемая ширина должна быть шириной изображений, плюс отступы и поля после любого падения поля.