居中图像在水平列表中

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

但是，我无法将图像置于每个列表项中间。

图像尺寸完全相同。

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; 

}

来源

2013-01-01 user1749428

我相信李是不够宽为图像中心。尝试增加宽度和减少'#nav li'的边距看看这个小提琴http://jsfiddle.net/fLaBz/1/ – traditional

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

来源

2013-01-01 16:59:23

没有工作.... – user1749428

它可能是关闭的文本？ – user1749428

！请在发帖前测试！1！ – bukart

你的错误是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; 
}

来源

2013-01-01 17:27:00 bukart

居中图像在水平列表中

回答

相关问题