为什么具有垂直对齐元素的表单元格不能与没有垂直对齐的表单元格对齐?

CSS属性vertical-align应该定位文本与元素的关系。但它实际上是一致的吗?

https://codepen.io/wammygiveaway/pen/BagwRoq

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;
    }
}

在这个CodePen示例中,我将使用IMG标签作为元素,并使用表作为容器。在左侧单元格中,您有一些文本和一个垂直对齐的IMG标签。在右边的单元格中,只有文本。从表面上看,即使添加了边框间距和填充修改器,两者似乎也对齐了。但是如果你放大得很近,你会发现具有垂直对齐IMG的单元格会使整个元素偏离几个像素。

哪个单元格表示正确的垂直对齐,一个单元格需要一个额外的元素(如IMG)来实现垂直对齐属性,另一个单元格只要没有其他元素就为您预设了垂直对齐属性?此外,我如何使两个表单元格的文本对齐,而不管需要它的单元格中是否存在IMG标签?