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>

你可以看到我试过浮动：中心，但它不会把它放在中心..

Answer 1

如果您的元素（以及您的列表）的宽度已知，您可以将列表显示为inline-block，并将auto页边距应用于其中：

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

使用的宽度应该是图像的宽度，加上填充和边距，在任何边距折叠之后。