You can make the <img>
elements block elements and center them using an auto
margin.
ul img {
display : block;
margin : 0 auto;
}
Another would be to use background images along with a background position:
ul li.home {
background-image : url(...);
background-position : center;
}
You will probably also want to remove the spaces between the <li>
elements. I like doing this by omitting the optional closing tags so you would have:
<ul>
<li><a href=...><img src=... />Item 1
<li><a href=...><img src=... />Item 2
...
</ul>
Other options for removing spaces can be found here: How to remove the space between list items
Edit: JSFiddle added with a stripped down version to show how this could work.