1. 行高的字面意思
“行高”是指两行文字间基线之间的距离。基线是在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字母的底边线。
2. line-height与line boxes高度
css中起高度作用的height以及line-height
如果一个标签没有定义height属性(包括百分比高度),那么其最终表现的高度一定是由line-height起作用,即使是IE6下11像素左右默认高度bug也是如此。有一个空的div,如果没有设置至少大于1像素高度height值时,该div的高度就是个0。如果该div里面打入了一个空格或是文字,则此div就会有一个高度。那么为什么div里面有文字后就会有高度呢?
这是个看上去很简单的问题,是理解line-height非常重要的一个问题。可能有人会跟认为是:文字撑开的!文字占据空间,自然将div撑开。我一开始也是这样理解的,但是事实上,深入理解inline模型后,我发现,根本不是文字撑开了div的高度,而是line-height!
撑开div高度的是line-height不是文字内容
到底这个line-height行高怎么就产生了高度呢?
在inline box模型中,有个line boxes,这玩意是看不见的,这个玩意的工作就是包裹每行文字。一行文字一个line boxes。例如“艾佛森退役”这5个字,只有一个line boxes罩着你;一个字罩着一个line boxes,于是总计五个line boxes。line boxes什么特性也没有,就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的
其实line boxes不是直接的生产者,而是 inline boxes干的,比方文字啦,图片啊,span之类的inline属性的标签啦。line boxes只是个考察汇报人员,考察它的下面谁的实际line-height值最高,谁最高,它就要谁的值,然后向上汇报,形成高度。
3. 行高的垂直居中性
行高还有一个特性,叫做垂直居中性。line-height的最终表现是通过line boxes实现的,无论line boxes所占据的高度是多少,其占据的空间都与其中的文字内容共用水平中垂线,也就是从水平中垂线开始,在竖直方向上向两边进行的平分,这种行为特性就叫做垂直居中特效
这一重要的特性可以用来实现文字或图片的垂直居中对齐
4. 在单行或多行或图片垂直居中实现上的应用
4.1 单行文字的垂直居中对齐
网上都是这么说的,把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的,但其实也是有问题的。问题在于height,看我的表述:“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”,差别在于我把height去掉了,这个height是多余的。
4.2 多行文字的垂直居中
要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div,里面文字单行或多行显示,字体大小有大有小的情况怎么办呢?方法之一就是借助于line-height,借助其的垂直居中特性。
line boxes的高度取决于它的下属职员的最高高度,而这个高度由一个不占据任何空间的空格完成,这个空格继承了父元素设置的150px的行高,再将其font-size设置为0。同时,我们在分隔line boxes的基础上,又要保持空格i和文字span在一行上,需要设置display属性为inline-block。最后再加上line boxes的垂直居中特性,导致的span内的文字和i内的空格都是在各自的line boxes内垂直居中,最后的最后因为文字间默认的基线对齐,所以文字和字母是下底边对齐而并没有顶行出现在顶部。