How to align image and text vertically within TD element?

Question

<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
 My feed
 </td>

This is how it looks like:

_{(source: garethjmsaunders.co.uk)}
My feed

The icon and the text is misalligned vertically. The icon is on the top of the table cell, the text is on the bottom. Both the text and the icon occupy 16 pixel but the cell still eats up 19. How can I align them to save those 3 pixels?

Answer 1

Well, if you choose the background image method, then it is very simple:

background: url(feed.png) left center no-repeat

Answer 2

The image is aligning to the base line of the text, this does not include the descender height which is the 'tick' in letter like g or y.

If the height of the row/cell is to be fixed, you can add line-height to get it to vertically centre. So for instance, assuming your cell is 16px high:

td.feed {
    line-height:16px;
}

The other option would be to add the icon as a background image, adding padding-left to the cell:

td.feed {
    background: transparent url(/wp-content/feed-icon-16x16.gif) no-repeat left center;
    padding-left: 18px; /* width of feed icon plus 2px spacing */
}

The second one would mean you could remove the need for tables at all, now there's an idea...