好基友verticle-align与line-height的相关问题探究

来源：互联网发布：淘宝活动在哪里报名编辑：程序博客网时间：2024/06/16 05:43

相信混迹前端的各位大侠们都对verticle-align和line-height两个形影不离的好基友不陌生，他们解决了我们大部分的垂直居中问题，图片、文字等等牛的要上天的江湖侠士都拜倒在他们的基友剑法之下，不得不乖乖按规矩站好。无奈在下赵日天虽是对这两基友有一定自己的理解，但还是在今天在他们的剑法之下翻了船，欲知详情，且听日天一一分解。

人物介绍：

1.line-height

       在两兄弟中，大哥line-height扮演者大规模破坏的力量型强攻的角色，为啥？一看其技能便知：
       Value: normal | <number> | <length> | <percentage> | inherit
       Initial: normal
       Applies to: all elements

它可以对所有元素起作用，但是平常使用的时候还是以调节p span等行间距为主，而且子元素会默认继承父元素的line-height，这也是为什么设置line-height等于父元素的height一样时可以使内容垂直居中的原理：

(1)当设置的line-height大于字体的大小时，会在每行文字上下产生形如margin一样的行间距，其计算的方式即为上间距=下间距=(lineHeight-fontSize)/2:

<p style="line-height: 50px;font-size: 20px;background-color: #00a65a;color: #fff">乖乖臣服于我把！！！</p>

果然在没有设置height以及padding的情况下，p的高度变成了50px与设置的Lineheight的值相等，正是设置line-height了大于字体大小的Line-height之后产生的‘行间距’撑开了p的高度，同时又起到了局中的效果，当然这只对block/inline-block的元素有效。

（2）当我们设置了小于字体大小的值的时候，根据上方的公式，计算出的上下行间距为负值，这时就会出现形如负margin的情况：两行文字会有一部分重叠在一起。

<p style="line-height: 14px;font-size: 20px;background-color: #00a65a;color: #fff;width: 200px;">乖乖臣服于我把！！！哈哈哈哈哈哈哈哈哈哈</p>

当然在平常使用的时候一般不会出现这种情况，主要注意Line-height是向下继承的，子元素会继承父元素的line-height，所以最好不要使用固定的形如40px的值，如果子元素的字体过大就会出现上图的情况，最好使用1.Xem或者1.Xrem或者1.X来定义行高

2.vertical-align

相比于大哥line-height,verticle-align就只能对行内元素起作用，具体说明如下：

　　初始值： baseline

　　继承性：不继承　

对于vertical-align，其属性值都特别明确，重点就在于基线与中线的理解，其默认值baseline就是基于基线来进行定位，想必大家都用过英语本，上面一道一道的线就是这里所说的顶线、中线、基线、地线，我们在写字时都是贴着稿纸上的第三条线（基线）来写的，而中线则是第二条，这里借用张鑫旭大神的一张图来说明四条线的区别：

　
其中top bottm middle baseline就是基于这四条线来进行定位的。我们最常用的就是使用Middle将图片进行居中，但是如果一张图片与一行文字放到一起时，文字的大小会影响中线的位置：

由于verticle-align的默认值为baseline所以当文字增大时，基线会被文字“挤”到下面去，而中线也相应下降，所以才会出现图片没有居中的问题，此时我们只要将同排的文字也设置verticle-align：middle就可以解决问题了，当然，也可以移步张鑫旭大神的在线测试来动手试一下以便更加深刻的了解这两兄弟：在线测试

0 0