html - 在水平列表中居中图像

Question

我有一个用作导航的水平列表，我想将图像/图标放在列表中的文本上方。

但是，我无法让图像与每个列表项居中。

图像具有完全相同的大小。

HTML：

<div id="nav">

<ul>
    <li><img src="images/kranznav.png" alt="kranz" /><a href="index.php">COMPETE</a></li>
    <li><img src="images/thumbnav.png" alt="thumb" /><a href="index.php">SCORE</a></li>
    <li><img src="images/bagnav.png" alt="bag" /><a href="index.php">SHOP</a></li>
    <li><img src="images/morenav.png" alt="more" /><a href="index.php">MORE</a></li>
</ul>
</div>
<div class="clear">
</div>

CSS：

#nav {
    background:#ffffff;
    width:100%;
    margin-top:-2em;

}


#nav ul {
    list-style-type:none;
}

#nav li {
    display:inline;
    float:left;
    width:2%;
    margin-left:10%;
    margin-right:10%;
    margin-top:5%;
}

#nav a {
    display:block;
    width:20%;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;

}

Answer 1

添加text-align:center;到#nav li

Answer 2

您的错误是您给列表项的宽度为 2%。这限制了宽度

http://jsfiddle.net/bukfixart/Z9uc7/

试试这种方式：

#nav li {
display:inline;
float:left;
/*width:2%;*/
margin-left:10%;
margin-right:10%;
margin-top:5%;

text-align:center;
}