Question

我得到了<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>

Answer 1

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

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

Answer 2

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

Answer 3

如果您将课程提供给<img class="tops">，那么CSS

.tops {
   vertical-align: top;
}

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

Answer 4

这为我完成了这项工作：

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

在html中：

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

Answer 5

试试这个..

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

如何垂直对齐图像

5 个答案: