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/

@ Yoann的解决方案也有效，但每个浏览器都不支持flex值。有关浏览器支持和display的值的详细信息，请查看MDN docs。

Answer 2

如果你可以使用margin：auto而不是text-align：center。显示：flex应该成交。

display:flex

http://jsfiddle.net/LG68Q

table-cell＆gt; img额外的4px空间

2 个答案: