CSS：表中没有精确的垂直对齐方式

Question

我发现如果我将图像放在像这样的表格单元格中（JSFiddle）：

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

图像下方会有一个小空间，使垂直对齐不准确：

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

我尝试将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设置为＆＃34; display：block＆＃34;

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