Fatal编程技术网
  • html/
  • Html 表格单元>；img额外4px空间

Html 表格单元>；img额外4px空间

html css image

Html 表格单元>；img额外4px空间,html,css,image,css-tables,Html,Css,Image,Css Tables,问题与此类似： 但解决方案是对图像应用display:block，但如果我这样做，我的垂直对齐就会丢失 <div class="main" style="display:table;"> <div style="display:table-cell;"> <img src="http://www.w3schools.com/images/w3logotest2.png" /> </div> </div>

问题与此类似： 但解决方案是对图像应用display:block，但如果我这样做，我的垂直对齐就会丢失

<div class="main" style="display:table;">
    <div style="display:table-cell;">
        <img src="http://www.w3schools.com/images/w3logotest2.png" />
    </div>
</div>
小提琴：
img高度：32px，父div高度：36px。找不到方法删除它并保持
垂直对齐：中间；文本对齐：居中使图像居中。当图像高度通过JavaScript设置为窗口高度时，这4个像素真的很烦人，所以滚动条出现。有没有办法去掉它？谢谢
 如果可以使用margin:auto而不是text align:center。显示器：flex应该可以成交


display:flex



当您将图像设置为块元素时，您必须将其作为块元素居中，并使用
边距：0 auto




@Yoann的解决方案也有效，但并非每个浏览器都支持
flex
值。如果可以使用margin:auto而不是text align:center，请查看，以了解有关浏览器支持和
显示的值的详细信息。显示器：flex应该可以成交。不起作用，也被弃用了，不是吗it@Yoann谢谢，它能工作！：）@Yoann如果你发布你的答案，我会接受的！好吧，只是添加了它作为答案：）例如IE<10不支持它不担心，他的答案要好得多！我原以为将父对象的“垂直对齐”设置为“中间”不起作用，但它确实起作用。谢谢