Question

我的标记看起来像这样：

＆＃13;

<html>
    <head>
        <style>
            table.t_group {
                border: 2px solid black;
                margin: 0 auto 0 auto;
            }
			
            table.t_group > tbody > tr > td {
                vertical-align: top;
            }
        </style>
    </head>	
    <body>
        <table class="t_group" style="width:500px">
            <tbody>
                <tr>
                    <td>
                        <img height="24" widht="24"/> First cell
                    </td>
                    <td>
                        Last cell
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

＆＃13;

关键问题是单元格中的文本与图像的垂直对齐。无论出于何种原因，它都与底部对齐，但我希望它与顶部对齐。

为什么会这样？如何将单元格中的文本与图像对齐到顶部？

Answer 1

使用vertical-align未正确对齐图像，因此其旁边的文字位于图像的基线

使用：

table img{
  vertical-align:top;
}

<强> jsBin playground
https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

Answer 2

您还需要对齐图像 - 现在，图像和文本位于一条“线”上，默认情况下图像与基线对齐，这就是您将获得的效果。

img { vertical-align: top; }

这将解决它。

为什么只有细胞顶部对齐？

2 个答案: