CSS学习笔记06 简单理解line-height

最新推荐文章于 2022-02-21 22:44:07 发布

weixin_33916256

最新推荐文章于 2022-02-21 22:44:07 发布

阅读量73

点赞数

原文链接：http://www.cnblogs.com/huangminwen/p/7045264.html

版权

在制作页面的时候，经常会遇到文本图片需要居中的情况，这时候，只要设置下文本的line-height属性等于包裹该文本的元素的高度即可让文本居中显示了，先来看看这个现象。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>行高</title>
 6     <style type="text/css">
 7         .line-height-demo {
 8             background-color: red;
 9             height: 100px;
10             font-size: 30px;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="line-height-demo">
16         这是一个测试行高的文本
17     </div>
18 </body>
19 </html>

默认情况下，文本顶在了div的左上角，现在设置下文本的line-height属性

这时候可以看到文本神奇般的居中了，这是为什么呢？要知道原因，需要弄懂line-height这个属性是什么以及它所表示的含义，line-height属性用于设置行间距，就是行与行之间的距离，一般称为行高，更官方一点的解释为文本行的基线间的距离，这里有个名词需要解释下，我想你应该猜到了，没错，就是基线。那么什么又是基线呢？看看下面这张图片