如何在水平導航菜單中將文字居中放在圖像上？

Question

FIXED：我只需要將「float：left」應用於「li」元素而不是imgs。謝謝！

我有一個水平導航菜單，我努力讓它在所有瀏覽器中都能正常工作。我創建了一個小提琴這裏：

http://jsfiddle.net/yTACT/

它在Chrome，Safari和Opera的偉大工程。但是，在Firefox和Internet Explorer中，文本沒有正確對中每個按鈕。相反，文本從第二個按鈕開始並溢出到右側。

任何人都可以找出解決辦法嗎？

HTML

<div id="nav"> 

<ul> 
    <li><a href="index.htm"><span>HOME</span><img src="http://www.cawyatt.co.uk/home-button.png" alt="Website Navigation. Home Button" title="Home" height="115" width="120" /></a></li> 
    <li><a href="how-use-services.htm"><span>HOW TO USE OUR SERVICES</span><img src="http://www.cawyatt.co.uk/how-button.png" alt="Website Navigation. How To Use Our Services Button" title="How To Use Our Services" height="115" width="120" /></a></li> 
    <li><a href="playstation-repair.htm"><span>PLAYSTATION REPAIR</span><img src="http://www.cawyatt.co.uk/playstation-button.png" alt="Website Navigation. Playstation Repair Button" title="Playstation Repair" height="115" width="120" /></a></li> 
    <li><a href="xbox-repair.htm"><span>XBOX REPAIR</span><img src="http://www.cawyatt.co.uk/xbox-button.png" alt="Website Navigation. Xbox Repair Button" title="Xbox Repair" height="115" width="120" /></a></li> 
    <li><a href="wii-repair.htm"><span>WII REPAIR</span><img src="http://www.cawyatt.co.uk/wii-button.png" alt="Website Navigation. Wii Repair Button" title="Wii Repair" height="115" width="120" /></a></li> 
    <li><a href="customer-reviews.htm"><span>CUSTOMER REVIEWS</span><img src="http://www.cawyatt.co.uk/reviews-button.png" alt="Website Navigation. Customer Reviews Button" title="Customer Reviews" height="115" width="120" /></a></li> 
    <li><a href="location-map.htm"><span>LOCATION AND MAP</span><img src="http://www.cawyatt.co.uk/map-button.png" alt="Website Navigation. Location And Map Button" title="Location and Map" height="115" width="120" /></a></li> 
    <li><a href="contact.htm"><span>CONTACT US</span><img src="http://www.cawyatt.co.uk/contact-button.png" alt="Website Navigation. Contact Us Button" title="Contact Us" height="115" width="120" /></a></li> 
</ul> 

CSS

ul, ol, dl { 
padding:0; 
margin:0; 
list-style:none; 
} 

#nav { 
position:relative; 
width:960px; 
height:115px; 
margin-bottom:10px; 
background-image: url(http://www.cawyatt.co.uk/nav-bg.png); 
} 

#nav li a span { 
position:absolute; 
width: 120px; 
top: 70px; 
text-align:center; 
z-index:2; 
font:12px Verdana, Arial, Helvetica, sans-serif; 
color:#fff; 
} 

#nav li a img { 
float:left; 
-webkit-transition:opacity 0.7s ease-in-out; 
-moz-transition:opacity 0.7s ease-in-out; 
-o-transition:opacity 0.7s ease-in-out; 
transition:opacity 0.7s ease-in-out; 
} 


#nav li a:hover img { 
opacity:0; 
} 

Answer 1

在#nav li{ position: relative; }和li img{ left: 0;}

下面的代碼。 http://jsfiddle.net/yTACT/8/