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;
}

将图像居中放在水平列表中

2 个答案: