對line-height的理解
阿新 • • 發佈：2018-12-25
<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>