CSS：table 中的垂直对齐不准确

Question

我发现如果我像这样 (JSFiddle) 将图像放入 table 单元格：

<table style="height: 300px; border: 1px solid black">
    <tr>
        <td><img src="https://www.google.com.hk/images/srpr/logo11w.png" /></td>
    </tr>
</table>

图片下方会有一个小的space，导致垂直对齐不准确：

有人知道这里发生了什么吗？

我尝试将 vertical-align: middle 添加到 td，但没有任何区别。

Answer 1

您是否尝试过将 display: block 添加到 img 元素？似乎解决了表中内容的大部分问题。

img {
  display: block;
}

<table style="height: 300px; border: 1px solid black">
  <tr>
    <td>
      <img src="https://www.google.com.hk/images/srpr/logo11w.png" />
    </td>
  </tr>
</table>

JSFiddle

Answer 2

您必须将 img 设置为 "display:block"

img {display:block}

http://jsfiddle.net/91beLce7/4/

Answer 3

试试这个Fiddle

*{
    margin: 0;
    padding: 0;
}
table tr td img{
    display: block;
}

Answer 4

你可以用 line-height: .8em;

解决这个问题

Answer 5

这样试试：Demo

* {
    margin: 0;
    padding: 0;
}
table {
    background:red;
    height: 300px;
    border: 1px solid black;
}
tr {
    background:#ccc;
}
img {
    background:green;
    display: block;
}

CSS：table 中的垂直对齐不准确

CSS: not exact vertical align in table

css

vertical-alignment