Display Images Over List Item Menu Links - html

Question

I need a cross-browser solution for having list item menu links with images. I'm using the default ASP.NET MVC 4 template and I have the following generated HTML:
<ul id="menu">
<li>
<a href="/Home/Item01">
<img src='/Images/MenuItem01.gif'/>
Menu Item 01
</a>
</li>
<li>
<a href="/Home/Item02">
<img src='/Images/MenuItem02.gif'/>
Menu Item 02
</a>
</li>
<li>
<a href="/Home/Item03">
<img src='/Images/MenuItem03.gif'/>
Menu Item 03
</a>
</li>
</ul>
The CSS:
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: left;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
background: none;
color: #999;
text-decoration: none;
}
ul#menu li a:hover {
color: #333;
text-decoration: none;
}
Here's a Fiddle: http://jsfiddle.net/EY3ad/
I'd like to have each image above the text and centralized. I haven't done pure HTML and CSS in years so any help would be appreciated. :)

Answer 1

Are you looking for something like this?
The HTML:
<ul id="menu">
<li> <a href="/Home/Item01">
<img src='http://lorempixel.com/48/48'/>
<span>Menu Item 01</span>
</a>
</li>
<li> <a href="/Home/Item02">
<img src='http://lorempixel.com/48/48'/>
<span>Menu Item 02</span>
</a>
</li>
<li> <a href="/Home/Item03">
<img src='http://lorempixel.com/48/48'/>
<span>Menu Item 03</span>
</a>
</li>
</ul>
The CSS:
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: left;
}
ul#menu li {
display: inline-block;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
background: none;
color: #999;
text-decoration: none;
position:relative;
}
ul#menu li a:hover {
color: #333;
text-decoration: none;
}
ul#menu li a img { display:block; margin:auto; }
ul#menu li a span{position:absolute; top:0; text-align:center;}

Answer 2

Try this:
ul.menu li{
background: url(images/<image-name>.gif) no-repeat;
list-style:none;
padding-left:4%;
margin-top:1%;
}