table-cell> img extra 4px space

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> 

小提琴：http://jsfiddle.net/Zf34P/ IMG高度：32PX，父DIV高度：36px。找不到方法将其移除并保留vertical-align: middle; text-align: center;以使图像居中。当图像高度通过JavaScript设置为窗口高度时，这4个像素真的很烦人，所以会出现滚动条。任何想法如何删除它？谢谢。

Answer 1

当您将图片设置为你要居中与margin: 0 auto块元素块元素。

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

@约恩的解决方案也适用，但flex价值不是由每一个浏览器的支持。请查看MDN docs以获取有关浏览器支持和display值的更多信息。

Answer 2

如果您可以使用margin：auto代替text-align：center。显示器：flex应该交易。

display:flex 

http://jsfiddle.net/LG68Q