Bilder im Menü zentrieren?

Question

Ich habe eine Liste von Links wie:

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

Der Punkt ist, Symbole genauso wie der Text neben ihnen auf dem gleichen Niveau sind, und ich möchte, dass sie unten ein wenig sein, so dass es wie sie aussehen sind zentriert.

Ich weiß, dass es schwer zu bekommen ist, überprüfen Sie den Link unten.

Es gibt eine Live-Demo (zwei Bilder unten, die erste zeigt, wie es jetzt aussieht, und der zweite, wie ich will, es sehen):

http://jsfiddle.net/3yZTg/

Answer 1

Verwenden vertical-align: middle auf die Bilder.

li a img 
{ 
    vertical-align: middle; 
} 

Answer 2

Alternativ und dies verhält sich gleichmäßiger über Browser, können Sie es ein bg machen:

<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>