如何理解vertical-align无法垂直居中的这个解释?

作者站长头像
站长
· 阅读数 9

演示地址:https://jsbin.com/ragoxecamu/edit?html,css,output为什么说是“行框盒子前面的“幽灵空白节点”高度太小”导致img无法垂直居中?如何理解vertical-align无法垂直居中的这个解释?

回复
1个回答
avatar
test
2024-07-03

参考 MDN 上的这篇文章:行内格式化上下文

vertical-align 会让行内元素对齐。

zxx 说的空白节点,我的理解实际上就是行内框的高度。如果不设置 line-height,行内框的高度就是 img 的高度,img 怎样与自己对齐呢?相反,设置了 line-height,行内框的高度就会等于 img 的高度 和 line-height 两者中较大的值,如果 line-height 的值比较大,那么 img 就会移动自己与 line-height 的中间对齐,这也是为什么要设置足够大的 line-height。

另外,我一直认为 zxx 喜欢把简单的东西搞复杂,与阮一峰正好相反,但他的技术肯定没的说

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容