前端7班 陸恩澤
初期的博客主要是把自己模糊的知識點細(xì)究一下，搜索其他人的相關(guān)技術(shù)博客整理吸收為自己的。最近一直對CSS樣式中的line-height屬性不太理解，我們在對文本進(jìn)行垂直水平居中時會設(shè)置行高和height相等實現(xiàn)這一操作。老樣子還是傳送門蛀骇。
CSS中的行高是指文本行中基線的高度，盜用一張原博中的圖片读拆。
說明圖片
基線指的是圖中的紅線擅憔，很多人肯能誤以為是粉紅色的線，粉紅色的線是底線檐晕。所以行高就是紅線之間的距離暑诸。
line-height應(yīng)用
div文字垂直居中
單行文字垂直居中，把line-height設(shè)置為box的大小可以實現(xiàn)單行文字的垂直居中。
多行文字垂直居中个榕。這里我轉(zhuǎn)了別人一個方法篡石，傳送門在這邊。多行文本垂直居中方法為：用一個span標(biāo)簽將所有的文字封裝起來笛洛，設(shè)置文字與圖片相同的display屬性（inline-block屬性）
夏志，然后用處理圖片垂直居中的方式處理文字的垂直居中即可。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
div{
display:table-cell;
border:1px solid black;
width:150px;
height:150px;
text-align:center;
vertical-align:middle;
}
span{
display:inline-block;
vertical-align:middle;/**只能用于table中**/
</style>
</head>
<body>
<div>
<span>hellow world!<br/>
hellow world!<br/>
hellow world!</span>
</div>
</body>
</html>
先就這樣吧苛让。>.-.<
