如何在<td>中垂直对齐图像

Ric*_*cky 11 html css

我得到了<td>两个图像()所在的位置,如下所示.一个远远高于另一个.如何让较短的一个对齐到顶部<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>
Run Code Online (Sandbox Code Playgroud)

Sha*_*ard 13

您需要在图像本身上设置垂直对齐.

<style>
td img { 
  vertical-align: top;
}
</style>
Run Code Online (Sandbox Code Playgroud)


Sir*_*nov 8

这为我完成了工作:

#logo-table td img, #logo-table td
{
    vertical-align: middle;
}
Run Code Online (Sandbox Code Playgroud)

在 HTML 中:

 <table id="logo-table">
      <!--table contents with imgs-->
 </table>
Run Code Online (Sandbox Code Playgroud)


msw*_*msw 5

如果你给你一个类,<img class="tops">那么 CSS

.tops {
   vertical-align: top;
}
Run Code Online (Sandbox Code Playgroud)

将图像的顶部边缘绑定到表格单元格顶部。


hei*_*don 5

添加align="top"到第一张图像(高的图像)

<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>
Run Code Online (Sandbox Code Playgroud)