Fotiman - 8:23 pm on Jun 23, 2008 (gmt 0)

It's been a while since I've done anything like this and I need some help. Here's my markup:

<ul> <li><a href="#"><img src="i.gif"></a></li> <li><a href="#">Example</a></li> </ul>

Here's my CSS:

ul { style: none; margin: 0; } li { display: inline; }

The problem I'm having is that I want the image in the first link and the text in the second link to both be vertically aligned on the "middle" of each. Like so:

+- ul --------------------------------+ ¦ +- li ------------+ +- li --------+ ¦ ¦ ¦ +- a ---------+ ¦ ¦.............¦ ¦ ¦ ¦ ¦ +- img ---+ ¦ ¦ ¦.............¦ ¦ ¦ ¦ ¦ ¦,,,,,,,,,¦ ¦ ¦ ¦ +- a -----+ ¦ ¦ ¦*¦*¦*¦,,,,,,,,,¦*¦*¦*¦*¦ Example ¦*¦*¦** (Middle) ¦ ¦ ¦ ¦,,,,,,,,,¦ ¦ ¦ ¦ +---------+ ¦ ¦ ¦ ¦ ¦ +---------+ ¦ ¦ ¦.............¦ ¦ ¦ ¦ +-------------+ ¦ ¦.............¦ ¦ ¦ +-----------------+ +-------------+ ¦ +-------------------------------------+

It looks, though, like the image sticks up out of the containing <a>'s line height. Does anyone know how to style this to achieve the layout above?
Thanks.