CSS：表格中不完全垂直对齐答案

【问题标题】：CSS: not exact vertical align in tableCSS：表格中不完全垂直对齐
【发布时间】：2015-07-09 21:54:50
【问题描述】：

我发现如果我将图像放在这样的表格单元格中 (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，但没有任何区别。

【问题讨论】：

HTML 5 strange img always adds 3px margin at bottom 的可能重复项。特别是查看http://stackoverflow.com/a/10844318/3400962，了解发生这种情况的原因以及解决方法。

标签： css vertical-alignment

【解决方案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

【讨论】：

【解决方案2】：

您必须将 img 设置为“display:block”

img {display:block}

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

【讨论】：

【解决方案3】：

试试这个Fiddle

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

【讨论】：

【解决方案4】：

你可以用line-height: .8em;解决这个问题

【讨论】：

【解决方案5】：

试试这样：Demo

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

【讨论】：