CSS line-height属性,设置行高和垂直居中
line-height属性
这里将介绍两种有关CSS中line-height属性的用法,一是用于设置文本的行高,另一个则是用于设置元素相对于父元素的垂直居中样式。
line-height属性设置行高实例,及在线编辑器
首先,来看一下通过line-height属性设置本文行高的方法,注意,是行高,而不是段落跟段落之间的距离:
<p class='lh1'>这个段落p内的文本的行高line-height属性被设置为50px。本来可以通过br元素来分行,但为了能够更好地展现出line-height的属性样式,这里凑了很多的字数。</p>
<style>
.lh1{line-height:50px;}
</style>
line-height属性值
属性值 | 描述 |
---|---|
number数值 | 数字,无单位 |
em | 相对长度单位 |
px | 像素 |
cm | 厘米 |
pt | 标准长度单位1pt=1/72英寸 |
line-height属性设置垂直居中实例
<div class='lh2'>
<p class='lh3'>内容</p>
</div>
<style>
.lh2{width:100%;height:60px;border:1px solid skyblue;text-align:center;}
.lh3{line-height:60px;}
</style>