centrage des images dans la liste horizontale

Question

J'ai une liste horizontale utilisée comme navigation, où je veux mettre des images/icônes au-dessus du texte dans la liste. Cependant, je n'arrive pas à centrer les images avec chaque élément de la liste.

Les images ont exactement la même taille.

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

Ajouter text-align:center; à #nav li

Answer 2

Votre erreur est la largeur de 2% que vous avez donné les éléments de liste. Cela limite la largeur

http://jsfiddle.net/bukfixart/Z9uc7/

Essayez cette façon:

#nav li { 
display:inline; 
float:left; 
/*width:2%;*/ 
margin-left:10%; 
margin-right:10%; 
margin-top:5%; 

text-align:center; 
}