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

Question

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

Answer 1

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

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

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

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

Answer 2

zxx大佬说的幽灵空白节点，你可以理解为一个空白的字符，你在img前面敲一个x上去看看就明白了，图片和这个x是垂直对齐的，然后你就想象有一个不占空间的空白的这么个x字符在图片前面也就是所谓幽灵空白节点
你可以再看下大佬博客上写的，CSS世界虽然我看过，不记得有没有博客里这段话了：
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-underst...

在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，我称之为“幽灵空白节点”。 //zxx: 自己捣腾的概念，不是权威，欢迎其他小伙伴反馈权威解释