Центрирование изображений в меню?

Question

У меня есть список ссылок, таких как:

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

Суть в том, что значки так же, как текст рядом с ними, находятся на том же уровне, и я хочу, чтобы они были немного ниже, поэтому они будут выглядеть как центрированные.

Я знаю, что это трудно получить, поэтому проверьте ссылку ниже.

Есть живое демо (два изображения ниже, первое показывает, как оно выглядит сейчас, а второе - как я хочу, чтобы оно выглядело):

http://jsfiddle.net/3yZTg/

Answer 1

В качестве альтернативы, и это ведет себя более единообразно во всех браузерах, вы можете сделать его 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>

Answer 2

Использовать вертикальное выравнивание: середина на изображениях.

li a img
{
    vertical-align: middle;
}