Image in list item effects position of other text in other list items

I have an unnumbered list i am trying to format for a menu.

&l开发者_运维百科t;ul>
    <li><img src="greatImage.png"></li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

I am trying to have all the list items content vertically centered with each other. When i add the image to the first list item it looks as though all the other list items position is pushed to the bottom border of the UL block? Basically the image is effecting the rest of the list items position.

One thing you could do is to set the line-height of the li equal to that of the image's height

example: http://jsfiddle.net/felcom/vdPtj/