码迷,mamicode.com
首页 > 其他好文 > 详细

对line-height的理解

时间:2018-12-25 11:36:03      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:行高   lock   block   lin   效果   html   isp   表示   red   

<html>

<head>
<style>
</style>
</head>

<body>
<!--line-height:属性表示的是该div中的文字的行高,注意这个属性是来定义文字的行高的,单行文本垂直居中时可以设置line-height和height一即可-->
<!--line-height=文本上边距+文本+文本下边距,文本上下边距始终相等,也就是说文本始终是垂直居中于line-height中的,所以设置line-height和height相等就能达到文本垂直居中于它的父元素的效果。-->
<div style="line-height:80px;height:80px;border:1px solid red">
<div style="display:inline;border:1px solid green;">单行文本div中居中显示</div>
</div>

<div style="height:300px;line-height:300px;border:1px solid red;">
<!--多行文本的垂直居中,可以将多行文本看做是一个inline或inline-block元素-->
<div style="line-height:normal;display:inline-block;border:1px solid red;vertical-align:middle">
多行文本居中显示<br>
多行文本居中显示<br>
多行文本居中显示<br>
多行文本居中显示<br>
</div>
<!--这里要使多行文本居中,设置这个空字符很关键,要不就不能垂直居中的-->
<i>&nbsp;</i>
</div>

</body>
</html>

对line-height的理解

标签:行高   lock   block   lin   效果   html   isp   表示   red   

原文地址:https://www.cnblogs.com/hanszhao/p/10172321.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!