如何理解line-height与vertical-align

如何理解line-height与vertical-align

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

1.背景介绍

随着互联网行业的发展，人们对网页的要求已经不限于传递信息，如何将网页设计的更合理，能更容易的让用户获取信息也愈发重要。而文字作为网页信息的主要载体，它的样式对用户交互的影响十分巨大，本次小课堂将跟大家分享两个关于文字样式的标签：line-height和vertical-align。

2.知识剖析

1.line-height基本概念

定义：行高是指文本行基线baseline之间的垂直距离

1.1 line-height属性可赋值

设置固定长度(px,rem等固定单位)

设置数字:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

设置百分比:基于当前字体尺寸的百分比行距

注意：数字可以直接被继承，然后在计算行高，而百分比是先计算出行高，在以px继承

2.vertical-align基本概念与应用

定义：使行内元素的基线相对于该元素所在行的基线的垂直对齐

默认值baseline:元素基线与父元素基线对齐

众所周知，vertical-align支持很多属性值；(关键字值:vertical-align等等: middle;长度值：vertical-align: 4px等等；百分比值：vertical-align: 10%...等等)

注意：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。

3.常见问题

为什么在div内插入图片，会发现图片下面有一段空白间隙？

4.解决方案

1,图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等

2,直接修改line-height值

5.编码实战

6.拓展思考

都用什么方法可以实现垂直居中？

1.想要让单行文字垂直居中居中，可以使用刚刚讲到的line-height属性

2.使用刚刚讲到的vertical-align属性实现居中

3.使用盒子模型

4.使用table布局

把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。

5.使用flex弹性布局

设置父元素display:flex，使用align-items:center

6.使用绝对定位

绝对定位后设置top和left为50%，然后纵向变化50%的自身高度

7.参考文献

参考一：MDN

参考二：深入理解line-height与vertical-align

参考三：对CSS vertical-align的一些理解与认识（一）

8.更多讨论

为什么我的vertical-align属性不起作用？

我们知道了vertical-align是垂直对齐的意思，不少经验尚浅的同行会试着使用这个属性实现一些垂直方向上的对齐效果，

            会发现有时候可以，有时候又不起作用，不知道为什么？因为只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。

还有什么其他的方法实现垂直居中

鸣谢

感谢大家观看

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院   

  “我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

   这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。

   快来与我一起学习吧~http://www.jnshu.com/login/1/21109035