CSS - 行高 ¶

• 作者：KK

• 发表日期：2016.1.30

属性名称:line-height

默认情况下我们每一行文字的距离都比较窄,所以当然就会有些地方的排版需要将每一行拉开点距离,例子:

<div style="width:500px; padding:10px; border:1px solid #DDD;">
	<p style=" border:1px solid green; text-indent:2em; line-height:1.5em">
		从前有个人叫小明,他终日无所是事,专找小红玩,可是小红不喜欢跟他玩,于是他就死缠烂打,最后得到了小红的芳心!他们相亲相爱,成为了客喻户晓的人物,所以我们从小就知道有小明和小红这两个人.我们也要对喜欢的妹子死缠烂打,才能成为家喻户晓的人
	</p>
</div>

以上用1.5em(font-size的1.5倍)作为一行的高度,其实你也可以改在22px看看

上下居中的妙用 ¶

行高可以实现一些简单的上下居中,先看下面这个例子,文字只是左右居中,但不会上下居中:

<div style="height:100px; border:1px solid #000; text-align:center;">文字文字</div>

其实CSS里没有上下居中的样式,对于以上这种情况,可以将line-height属性的值设置为与容器高度一样的值即可

那么以上文字的容器就是div,这个div的高度是100px,于是我们也加一个line-height:100px;看看咯

<div style="height:100px; line-height:100px; border:1px solid #000; text-align:center;">文字文字</div>