两个inline-block元素上下不对齐,出现错位
问题描述:在类似发现深藏的好店的布局中img和p都设置为inline-block。发现两个元素虽然在同一行上,但并不对齐。是基线对其问题,进一步来说,两个 inline-block 的元素都按照默认的垂直对齐方式为什么会产生不同的对齐效果?原因在于容器使用了 overflow: hidden 属性,这一属性改变了 inline-block 元素的基线
·
问题描述:在类似
<div class="ovh">
<h3 class="lh24 h24">
<img class="dib"><p class="h24 lh24 dib">发现深藏的好店</p>
</h3>
</div>
的布局中img和p都设置为inline-block。发现两个元素虽然在同一行上,但并不对齐。
是基线对其问题,进一步来说,两个 inline-block 的元素都按照默认的垂直对齐方式为什么会产生不同的对齐效果?原因在于容器使用了 overflow: hidden 属性,这一属性改变了 inline-block 元素的基线位置,导致这一元素上移。因此,同时设置两个元素的垂直对齐方式为非基线对齐的值,或为另一个元素添加 overflow 属性都可以解决这一问题。更多推荐
已为社区贡献2条内容
所有评论(0)