CODEWITHSUNDEEP
htmlcss
Ricky
Ricky

Reputation: 35963

How to vertically align images in <td>

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>

Upvotes: 23

Views: 59731

Answers (6)

estebu
estebu

Reputation: 51

Maybe this works for You:

<img style="margin-top:22.5%;" src=".........  />

Upvotes: 0

Siroj Matchanov
Siroj Matchanov

Reputation: 141

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>

Upvotes: 11

ZX12R
ZX12R

Reputation: 4826

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>

Upvotes: 1

heisthedon
heisthedon

Reputation: 3707

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>

Upvotes: 5

Shawn Steward
Shawn Steward

Reputation: 6825

You need to set vertical alignment on the images themselves.

<style>
td img { 
  vertical-align: top;
}
</style>

Upvotes: 25

msw
msw

Reputation: 43527

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.

Upvotes: 5

Related Questions