How to align image and text vertically within TD element?

StackOverflow https://stackoverflow.com/questions/447539

  •  22-07-2019
  •  | 
  •  

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?

Was it helpful?

Solution

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

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

OTHER TIPS

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

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.

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

simply try "vertical-align: middle" on IMG tag, after than you can also set padding for TD

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

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>

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 tried the background image method but didn't like it as much as this...

In the CSS...

.iconLabel {
    position: relative;
    top: -6px;
    padding-left: 8px;
}

In the page...

<td style="text-align:center;">
    <a href="overview.cfm"
        ><img alt="Overview" src="Globe.png" 
        align="middle" border="0" height="60" width="60"
        ><span class="iconLabel">Overview</span
    ></a> 
</td>
  • Play with the "top" attribute to move the text/label up and down.
  • Play with the padding attribute to change the horizontal space between the icon and the text/label.
  • You should check it across any browsers you're concerned about, as they may render with slight differences.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top