大家好，这里是修真院前端小课堂，今天给大家分享的是

《如何理解 vertical-align 与 line-height？》

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. 参考文献

8. 更多讨论

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

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

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

最后

以上就是飘逸柜子为你收集整理的如何理解 vertical-align 与 line-height？1. 背景介绍2. 知识剖析3. 常见问题4. 解决方案5. 编码实战6. 拓展思考7. 参考文献8. 更多讨论的全部内容，希望文章能够帮你解决如何理解 vertical-align 与 line-height？1. 背景介绍2. 知识剖析3. 常见问题4. 解决方案5. 编码实战6. 拓展思考7. 参考文献8. 更多讨论所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。