Question

我遇到这种情况，其中第一个表单元格包含＆＃34; name＆＃34;和第二个细胞一些文字。文本可能包含嵌入的图像。当图像出现在第一行时，它会向下推动整个第一行。它使第一个文本行不再与第一个单元格文本对齐。我想让两个表格单元格的第一行对齐。

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

在跟随小提琴的目标是对齐一个＆＃34;一个＆＃34;单词＆＃34; two＆＃34;。我知道我可以垂直对齐：顶部;在图像上，但它拉出第二个单元格的文本，它看起来很糟糕，因此它不是一个选项。任何类型的解决方案都可以正常工作，无论是css / javascript / webkit-only解决方案。

编辑：请注意，图像的高度和宽度可能会有所不同。我还更新了图像对齐方式＆＃34; middle＆＃34;。它确实没有改变情况。

EDIT2：最终的解决方案＆＃34; hack＆＃34; 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

另一个想法......我认为你想要的东西需要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 3

您可以将图像放入第二行：修改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 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

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

5 个答案: