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

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/

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

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

编辑2： 最终解决方案“破解”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 是行高 });

Answer 2

你可以把图片放到第二行：修改HTML和CSS如下图：

HTML

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

CSS

table, tr, td {
    border: solid 1px red;
}

.align {
    vertical-align: top;
    border-bottom:none;
}

问候，

Answer 3

另一个想法......我认为你想要的需要 JavaScript，是的......

span {
    display: inline-block;
    vertical-align: middle;
    height: 10px; width: 50px;
}
span img {
    float: left;
    position:absolute;
    margin-top: -25px; /* Try with -5px. */
}

JSFIDDLE

Answer 4

你可以使用 span 元素：

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

Answer 5

在您的具体问题中，这将起作用

.align {
    vertical-align: center;
    padding-top:15px;
}

DEMO