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

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>

- Ricky

---

这里有一个解决方案 => https://dev59.com/HW025IYBdhLWcg3wKCf-#57590933 - A. Morel

Answer 1

你需要在图片本身上设置垂直对齐。

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

- Shawn Steward

---

哇！谢谢！ - Morfinismo

Answer 2

这对我来说解决了问题：

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

在HTML中：

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

- Siroj Matchanov

Answer 3

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

.tops {
   vertical-align: top;
}

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

- msw

---

嗯，我现在正在查看的示例页面与您的示例代码有两个不同之处。img标签具有“height =”指令，并且样式是指定为类。我现在正在进行跨浏览器测试... - msw

哎呀，我真正想说的是 img 标签属性。 - msw

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

- heisthedon

---

如果你只设置其中一个，我非常确定你需要将其设置为较小的那个，而不是较大的那个。 - Shawn Steward

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>

- ZX12R