code_junkie

Aligning image and text vertically within TD element

Nov 13th, 2011
122
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.41 KB | None | 0 0
  1. <td>
  2. <img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
  3. My feed
  4. </td>
  5.  
  6. td.feed {
  7. line-height:16px;
  8. }
  9.  
  10. td.feed {
  11. background: transparent url(/wp-content/feed-icon-16x16.gif) no-repeat left center;
  12. padding-left: 18px; /* width of feed icon plus 2px spacing */
  13. }
  14.  
  15. .feed {
  16. background: transparent url("http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif") no-repeat scroll left center;
  17. padding-left: 16px;
  18. }
  19.  
  20. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  21. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  22. <head>
  23. <title>garethjmsaunders.co.uk</title>
  24. <style type="text/css">
  25. a { text-decoration: none; }
  26. a img { border: 0; vertical-align: text-bottom; }
  27. </style>
  28. </head>
  29. <body>
  30. <table>
  31. <tr>
  32. <td>
  33. <a href="" title="garethjmsaunders.co.uk rss feed">
  34. <img alt="" src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif" />
  35. My feed
  36. </a>
  37. </td>
  38. </tr>
  39. </table>
  40. </body>
  41. </html>
  42.  
  43. <td>
  44. <img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
  45. <span class="feedTxt">My feed</span>
  46. </td>
  47.  
  48. .feedTxt { line-height: 20px; } /* Or whatever the height of the image is. Adjust as needed. */
  49.  
  50. <td>
  51. <table><tr style="vertical-align:top;"><td><img src="path_here" /></td><td>my feed</td></tr></table>
  52. </td>
Add Comment
Please, Sign In to add comment