Align text and image vertically in an unordered list of dynamic heights

Question

I currently have a list of items. Some elements are one line of text, while others are two lines with a break between them.

I'm having difficulty vertically aligning the image to the right of the text. I can easily align when there is only one line of text, but with several lines the image hangs at the top.

<ul> <li><a href="#"><img src=""/>Text Text Text<br/>Second Line of Text</a></li> <li><a href="#"><img src="" />Text Text Text</a></li> <li><a href="#"><img src="" />Text Text Text</a></li> </ul> 

The following is an example of what is happening.

http://jsfiddle.net/SAwFE/

Answer 1

I would use absolute positioning. Change it to this one that has the following updated code:

 ul li { position: relative; /* added to your existing code */ } img { height: 20px; width: 20px; position: absolute; right: 12px; top: 50%; margin-top: -10px; /* half height of image */ } 

To avoid a potential match (for your comment), then increase the correct padding by li in width img like this :

 ul li { padding: 9px 32px 9px 12px; /* modified existing code */ position: relative; /* added to your existing code */ }