我有一个包含两张图片的 <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>
我有一个包含两张图片的 <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>
你需要在图片本身上设置垂直对齐。
<style>
td img {
vertical-align: top;
}
</style>
这对我来说解决了问题:
#logo-table td img, #logo-table td
{
vertical-align: middle;
}
<table id="logo-table">
<!--table contents with imgs-->
</table>
<img class="tops">
添加一个类,那么 CSS.tops {
vertical-align: top;
}
将图片的顶部边缘绑定到表格单元格的顶部。
img
标签属性。 - msw请将第一张图片(高的那个)添加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>
试试这个...
<td cellpadding="0" valign="top">
<img width="85" src=".../xyz.png" style="display:inline;"/>
<img src=".../icon_live.gif" style="display:inline;" />
</td>