html - table-cell > img 额外的 4px 空间

Question

这个问题和这个类似: Extra spacing after an A Tag/img tag?但解决方案是将 display:block 应用于图像，但如果我这样做，我的垂直对齐就会丢失。

<div class="main" style="display:table;">
    <div style="display:table-cell;">
        <img src="http://www.w3schools.com/images/w3logotest2.png" />
    </div>
</div>

fiddle :http://jsfiddle.net/Zf34P/img 高度:32px，父 div 高度:36px。找不到删除它并保持 vertical-align: middle; 的方法text-align: center; 所以图像居中。当图像高度通过 JavaScript 设置为窗口高度时，这 4 个像素真的很烦人，因此会出现滚动条。任何想法如何删除它？谢谢。

Answer 1

当您将图像设置为 block 元素时，您必须将其作为具有 margin: 0 auto 的 block 元素居中。

http://jsfiddle.net/LG68Q/2/

@Yoann 的解决方案也有效，但并非所有浏览器都支持 flex 值。看看 MDN docs有关浏览器支持和 display 值的更多信息。