How to align image and text vertically within TD element?

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...


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;
}

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

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

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.

Tags:

Html

Alignment

Html Table

Recent Posts