javascript - 如何垂直对齐表格单元格中的第一行文本？

Question

我有这种情况，第一个表格单元格包含“名称”，第二个单元格包含一些文本。文本可能嵌入图像。当图像出现在第一行时，它会将整个第一行向下推。它使第一个文本行不再与第一个单元格文本对齐。我想让两个表格单元格的第一行对齐。

<table>
    <tr>
        <td class="align">one</td>
        <td>two <img src="http://www.emofaces.com/en/emoticons/v/vampire-emoticon-before-lunch.gif" /> three three three three three three three three three three three three three three three three three three three</td>
    </tr>
</table>

http://jsfiddle.net/gdx0qhcc/31/

接下来的 fiddle 目标是将单词“一”与单词“二”对齐。我知道我可以垂直对齐:顶部；在图像上，但它会将第二个单元格的文本向上拉，看起来很糟糕，因此它不是一个选项。任何一种解决方案都可以真正发挥作用，无论是 css/javascript/webkit-only 解决方案。

编辑:请注意，图像的高度和宽度可能会有所不同。我还更新了图像对齐方式为“中间”的 fiddle 。它并没有真正改变情况。

编辑2:最终解决方案“hack”http://jsfiddle.net/Lqcx2vfg/谢谢大家

Answer 1

HTML:

<table>
<tr>
    <td class="align">one</td>
    <td>two <img src="http://www.emofaces.com/en/emoticons/v/vampire-emoticon-before-lunch.gif" /> three three three three three three three three three three three three three three three three three three three</td>
</tr>

CSS:

*{
    margin: 0;
    padding: 0;
}
table, tr, td {
    border: solid 1px red;
    line-height: 16px;
}
.align {
     vertical-align: top; 
}

JavaScript:

$(document).ready(function() {
$('.align').css('padding-top',(parseInt($('img').css('height'))-16)+"px");

//16 is the line-height });