相信混迹前端的各位大侠们都对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就只能对行内元素起作用,具体说明如下:
语法: vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
说明: 设置元素内容的垂直对齐方式
值: baseline,sub,super,top,middle,bottom,text-top,text-bottom;
初始值: baseline
继承性: 不继承
对于vertical-align,其属性值都特别明确,重点就在于基线与中线的理解,其默认值baseline就是基于基线来进行定位,想必大家都用过英语本,上面一道一道的线就是这里所说的顶线、中线、基线、地线,我们在写字时都是贴着稿纸上的第三条线(基线)来写的,而中线则是第二条,这里借用张鑫旭大神的一张图来说明四条线的区别:
其中top bottm middle baseline就是基于这四条线来进行定位的。我们最常用的就是使用Middle将图片进行居中,但是如果一张图片与一行文字放到一起时,文字的大小会影响中线的位置: