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

【问题标题】：How to vertically align images in <td>如何在 <td> 中垂直对齐图像
【发布时间】：2023-03-28 06:10:01
【问题描述】：

我有一个<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>

【问题讨论】：

这里有一个解决方案 => stackoverflow.com/a/57590933/2736742

标签： html css

【解决方案1】：

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

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

【讨论】：

哇！谢谢！ ?

【解决方案2】：

这为我完成了工作：

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

在html中：

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

【讨论】：

【解决方案3】：

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

.tops {
   vertical-align: top;
}

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

【讨论】：

嗯，我现在查看的示例页面与您的示例代码有两个不同之处。 img 标签有height= 指令并且样式被指定为一个类。我现在正在跨浏览器测试...
糟糕，我的意思是img 标签属性。

【解决方案4】：

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

【讨论】：

如果您只设置其中一个，我很确定您需要将其设置为较小的而不是较大的。

【解决方案5】：

试试这个..

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

【讨论】：