You could do position: relative; top: 3px; on the <img> tag. You could also try vertical-align: middle; on the <td> tag, but I don't think it'll work properly, as I'm pretty sure I've encountered this before. You could also put them in separate <td> tags, but that's kind of a no-no.
I would put the two elements (image and text) in their own separate table cells. You could nest another table. That's a good place to start. Then you could play around with padding, etc. to adjust.
<td>
<table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
</td>
simply try "vertical-align: middle" on IMG tag, after than you can also set padding for TD
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...
well if you choose the background image method, then it is very simple: "background: url(feed.png) left center"
What's wrong with making it a background image?
.feed {
background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
padding-left: 16px;
}
Other answers that state the image shouldn't be part of the content and is merely for decoration, which is debatable. I do believe that you should add an empty alt attribute to your image so that screen readers can ignore the image if you choose to keep your current method.
The vertical-align property is the one you need to be using here, but what you want to use is text-bottom. I'm also going to assume you want this to be a link, so here's a full code example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>garethjmsaunders.co.uk</title>
<style type="text/css">
a { text-decoration: none; }
a img { border: 0; vertical-align: text-bottom; }
</style>
</head>
<body>
<table>
<tr>
<td>
<a href="" title="garethjmsaunders.co.uk rss feed">
<img alt="" src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif" />
My feed
</a>
</td>
</tr>
</table>
</body>
</html>
If this still isn't desirable, you can experiment with line-height and other values for vertical-align to see what works best for you.
Try this:
<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
<span class="feedTxt">My feed</span>
</td>
.feedTxt { line-height: 20px; } /* Or whatever the height of the image is. Adjust as needed. */