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

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 喜欢把简单的东西搞复杂,与阮一峰正好相反,但他的技术肯定没的说
回复

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