20

I got a <td> where two images () reside shown as follows. One is much higher than the other. How do I let the shorter one align to the top of <td />?

<td  style="padding-left: 0px; cursor: pointer; vertical-align: top;">
<img width="85px" src=".../xyz.png"/>
<img src=".../icon_live.gif" /> // shorter one
</td>
1

5 Answers 5

24

You need to set vertical alignment on the images themselves.

<style>
td img { 
  vertical-align: top;
}
</style>
1
  • Wow! Thank you! 🤯
    – Morfinismo
    May 7, 2021 at 22:50
7

This did the job for me:

#logo-table td img, #logo-table td
{
    vertical-align: middle;
}

In html:

 <table id="logo-table">
      <!--table contents with imgs-->
 </table>
5

If you give a class to your <img class="tops"> then the CSS

.tops {
   vertical-align: top;
}

will bind the top edge of the images to the table cell top.

2
  • Hmm, the example page that I am looking at right now differs from your sample code in two ways. The img tags have height= directives and the style is specified as a class. I am now cross-browser testing...
    – msw
    Mar 16, 2010 at 5:35
  • Oops, I really meant the img tag attribute.
    – msw
    Mar 16, 2010 at 5:37
4

add align="top" to the first image (the tall one)

<td  style="padding-left: 0px; cursor: pointer; vertical-align: top;">
<img width="85px" src=".../xyz.png" align="top" />
<img src=".../icon_live.gif" /> // shorter one
</td>
1
  • I'm pretty sure you'd need to set it to the smaller one rather than the larger one if you just set one of them. Mar 16, 2010 at 14:11
1

try this..

<td cellpadding="0" valign="top">
  <img width="85" src=".../xyz.png" style="display:inline;"/>
  <img src=".../icon_live.gif" style="display:inline;" />
</td>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.