欢迎光临
我的个人博客网站

css属性line-height的应用——单行文字上下居中

目录

line-height属性是很常用的css属性,可以用它来设置文字的行高,但是不允许使用负值

line-height属性的可用属性值

1.line-height: normal

默认值。文字会默认有一个合理的行间距。

2.line-height: number

属性值可以是一个数字,该数字与字体尺寸即font-size的值相乘作为行高。
示例

<body> <p>这里是一句用于测试的文字。</p> <style>     body,p{         margin: 0;         padding: 0;     }     p{         font-size: 16px;         line-height: 2;     } </style> </body> 

css属性line-height的应用——单行文字上下居中
图1-可以看见最终p元素的行高为32px

3.line-height: length

可以设置一个具体固定的值(包含数值和单位)作为行高。
示例

<style>     body,p{         margin: 0;         padding: 0;     }     p{         font-size: 16px;         line-height: 28px;     } </style> 

css属性line-height的应用——单行文字上下居中
图2-可以直接设置具体的行高

4.line-height: x%

可以设置基于当前字体尺寸的百分比作为行高,具体使用可看示例。
示例

<style>     body,p{         margin: 0;         padding: 0;     }     p{         font-size: 20px;         line-height: 90%;     } </style> 

css属性line-height的应用——单行文字上下居中
图3-可以看出文字的行高等于font-size属性的值乘以90%

<style>     body,p{         margin: 0;         padding: 0;     }     p{         font-size: 20px;         line-height: 110%;     } </style> 

css属性line-height的应用——单行文字上下居中
图4-再次测试,结果同图3

5.line-height: inherit

从父元素继承该属性,当父元素的该属性值是一个缩放比例时,子元素将继承该缩放比例而不是具体的数值。
注意: IE浏览器不支持该属性值。
示例

<body>     <div>         这是父元素内的文字内容。         <p>这是子元素内的文字内容。</p>     </div> <style>     body,div,p{         margin: 0;         padding: 0;     }     div{         font-size: 16px;         line-height: 2;     }     p{         font-size: 20px;         line-height: inherit;     } </style> </body> 

css属性line-height的应用——单行文字上下居中
图5-子元素的行高是子元素font-size属性值和从父元素上继承的line-height属性值相乘得出的计算结果
css属性line-height的应用——单行文字上下居中
图6-整个div的高度是父元素行高(16px*2=32px)加上子元素行高得出的计算结果,等于72px

应用场景

单行文字上下居中

想要让单行文字上下居中显示,只需设置元素的line-height属性值和height属性相等即可。
示例

<body> <p>这里是一句用于测试的文字。</p> <style>     body,p{         margin: 0;         padding: 0;     }     p{         background-color: #999999;         font-size: 16px;         height: 50px;     } </style> </body> 

css属性line-height的应用——单行文字上下居中
图7-未设置line-height时文字的显示情况

<body> <p>这里是一句用于测试的文字。</p> <style>     body,p{         margin: 0;         padding: 0;     }     p{         background-color: #999999;         font-size: 16px;         height: 50px;         line-height: 50px;     } </style> </body> 

css属性line-height的应用——单行文字上下居中
图8-设置line-height等于height后文字的显示情况

写在最后

以上为全部内容,感谢阅读。
本博文仅为学习记录和分享交流,如有错漏,还请帮忙指出,也欢迎更多补充,不胜感激。

GitHub地址:https://github.com/ljxlijiaxin.

赞(0) 打赏
未经允许不得转载:张拓的天空 » css属性line-height的应用——单行文字上下居中
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏