valign='middle' 有效，但未正确显示文本仍显示为 'bottom'

Question

在 <td> 上使用 valign='middle' 工作正常，但是，它没有显示 "in the middle"，它显示为我正在使用 valign='bottom'。

我知道它设置正确的原因是 valign='top' 确实在 table 的顶部正确显示了文本。

我尝试使用 style='line-height: 0;' 从 <td> 中删除行高，但这并没有改变任何东西，文本仍然出现在底部。

我没有办法尝试搜索前 3 google 页寻找答案，如果您知道我在这里做错了什么，请告诉我。

参考代码：

...
echo "<tr height='32px'>";
echo "<td width='150px' valign='top'><img src='./images/eye.png' style='height: 32px; width: 32px; margin-right: 10px;'>" . $story->story_extras->view_count . "</td>";
echo "<td valign='top'><img src='./images/camera.png' style='height: 32px; width: 32px; margin-right: 10px;'>" . $story->story_extras->screenshot_count . "</td>";
echo "</tr>"
...

Answer 1

您可以将 <img> 设为方块。

td img { display: block; }

或将对齐方式添加到 <img> 标签。

td img { vertical-align: middle; }

Answer 2

您指定单元格应垂直对齐，但它已满。你想要的是图像在文本中间垂直对齐，所以你应该添加 align='middle' 到你的 <img> 标签。

valign='middle' 有效，但未正确显示文本仍显示为 'bottom'

valign='middle' working, but not showing correctly text still appears as 'bottom'

html

css

html-table