对line-height的理解
Posted hanszhao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对line-height的理解相关的知识，希望对你有一定的参考价值。
<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> </i>
</div>
</body>
</html>
以上是关于对line-height的理解的主要内容，如果未能解决你的问题，请参考以下文章
如何理解line-height与vertical-align
我对line-height及vertical-align的一点理解