line-height与垂直居中

css中行高到底指的是什么了？

line-height称之为行高，顾名思义是指行的高度，目前的主流说法是指两行文本之间基线之间的垂直距离，line-height实际距离指两个半行间距（上一行文本底线与下一行文本的顶线之间垂直距离的二分之一）加上字体本身高度。

也有人并不赞同上述说法（他认为行高并非指的是两行文本之间基线的距离），对于行高 的解释有自己的一套解释方法，

• 可以看看这位作者是怎么认为的
  该作者认为line-height即是两个leading（line-height与font-height的高度差的二分之一）加上字体高度（他称之为content area 即内容区的高度），之所以文本默认在行框中显示为居中状态，上下有间隙，是因为浏览器默认给line-height设置有高度，一旦给文本设置有高度，那么相当于在文字上下添加了两个高度相等的leading，这样就出现了浏览器文字的默认效果，即文字在单行文本中居中，而且上下有间隙。

引申一下inline-box模型的概念

line-box模型大致有这么几个概念，line-box(行框)，当一行行内元素（inline-element）处在同一行时，这一行会生成一个line-box，当然这个盒子你是看不到的，也无法通过css来控制显现出来，而对于每个行内元素会生成一个inline-box（内联盒/行内框），这个行内框的高度实质上就是line-height，而line-box的高度可以视为是由最高的那个inline-box所撑开的，因此对于一个line-box而言其高度就是其内部inlne-box的最大line-height。

• w3c官方文档对于内联元素以及匿名内联框的描述

由上述我们得出一个结论：

• line-box的高度等于其内部inline-box的最大line-height，
• 如果这个line-box内部的inline-box都是文本，那么出现的效果应该是单行文本垂直居中。
• 但是如果这个line-box不只是文本这种内联框还有图片等不同line-height的内联框时，还能保持整体的行内垂直居中对齐吗？ 简单测试一下，我们可以看出，对于上述情况并未能够实现文字和图片都垂直居中

line-height与垂直居中问题

一些相关的论述，有时间再进行深入的研究

参考文章