我有一个用作导航的水平列表,我想将图像/图标放在列表中的文本上方。
但是,我无法让图像与每个列表项居中。
图像具有完全相同的大小。
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;
}