居中圖像在水平列表中

我有一個水平列表用作導航，我想將圖像/圖標放在列表中的文本上方。居中圖像在水平列表中

但是，我無法將圖像置於每個列表項中間。

圖像尺寸完全相同。

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

居中圖像在水平列表中

回答

相關問題