Centering images in menu?

I have a list of links such as:

<li><a href="#"><img src="icon.png" /> Text</a></li>

The point is icons just like the text next to them are at the same level and I want them to be a little below, so it will look like they're centered.

I know it's hard to get, so check the link below.

There's a live demo (two images bel开发者_如何学编程ow, the first one shows how it looks now and the second one how I want it to look):

http://jsfiddle.net/3yZTg/

Use vertical-align: middle on the images.

li a img
{
    vertical-align: middle;
}

Alternatively, and this behaves more uniformly across browsers, you can make it a bg:

<li><a href="#"><span style="padding-left: 12px; display: block; background: transparent url(icon.png) left center no-repeat; float: left;">Text</span></a></li>