I am facing an issue with my horizontal navigation list, where I am trying to place images/icons above the text in each list item.
Despite all the images being the same size, I am struggling to center them properly within the list items.
Here is the HTML code:
<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>
And here is the CSS code:
#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;
}