含vertical-align元素的表格单元格为何错位？如何统一对齐？

我尝试用CSS的vertical-align属性对齐元素内的文本，但实际效果存在偏差。示例代码如下：

HTML代码 #

<TABLE>
 <TR>
  <TD>Here is a cell with vertical alignment.<IMG src="sometext"></TD>
  <TD>Here is a cell without an alignment.</TD></TR></TABLE>

CSS代码 #

TABLE {
    width: 50%;
    margin: 0px auto;
    border-spacing: 0px;
    TD {
        border: 1px solid black;
        padding: 0px;
        width: 50%;
    }
    IMG {
        vertical-align: middle;
    }
}

示例中左侧单元格包含文本和设置了vertical-align: middle的图片，右侧单元格仅含文本。表面上两者文本对齐，但放大后左侧文本会偏移几个像素。现咨询两个问题：

1. 哪种对齐效果才是正确的？
2. 如何实现无论单元格是否包含图片，文本都能精准对齐？

问题原因与正确对齐效果 #

当前的偏移源于：

• 右侧单元格的文本默认与**基线（baseline）**对齐
• 左侧单元格里，图片设置vertical-align: middle后，会将图片与文本中线对齐，这会改变整个行盒的基线位置，导致文本整体偏离原本的基线

从排版逻辑来说，让两个单元格的文本都对齐到基线，或者都对齐到中线，都是合理的正确效果——具体取决于你的布局需求，不过网页排版中文本默认的基线对齐是常规标准。

实现统一对齐的解决方案 #

有两种常用方法可以实现统一对齐：

方法1：让所有文本对齐到基线

将图片的vertical-align改回默认的baseline，这样左侧单元格的文本和图片都对齐到基线，与右侧单元格文本保持一致：

TABLE {
    width: 50%;
    margin: 0px auto;
    border-spacing: 0px;
    TD {
        border: 1px solid black;
        padding: 0px;
        width: 50%;
    }
    IMG {
        vertical-align: baseline; /* 恢复默认值 */
    }
}

方法2：让所有文本对齐到中线

如果希望文本垂直居中，不要给图片单独设置vertical-align，而是给单元格设置vertical-align: middle，这样单元格内所有内容（无论是否包含图片）都会垂直居中：

TABLE {
    width: 50%;
    margin: 0px auto;
    border-spacing: 0px;
    TD {
        border: 1px solid black;
        padding: 0px;
        width: 50%;
        vertical-align: middle; /* 给单元格设置垂直居中 */
    }
    /* 移除图片的vertical-align设置 */
}

补充方案（保留图片middle对齐） #

如果必须保留图片的vertical-align: middle，可以给左侧单元格的文本包裹<span>并设置vertical-align: baseline，强制文本对齐到基线，抵消图片带来的偏移：

<TD><span style="vertical-align: baseline;">Here is a cell with vertical alignment.</span><IMG src="sometext"></TD>

内容的提问来源于stack exchange，提问作者Wammy