line-height:行高 設置文字間上下距離
height:高度 就是定義一個層 或某樣東西的高度
也就是說line-height是特指單行高度,height可以爲所有元素的高度
是用來規定整個div的高搜索度,文字還是默認會在頂端開始向下排列
是規定行高的,就是一行120個像素,文字會相對於這120像素垂直居中!
line-height直白理解就是文字高度加上文字上下的空白區域,line-height最好不要設置單位,如果固定單位後,行高就是確定值。
使用height和line-height實現垂直居中
單行垂直居中
如果一個容器中只有一行文字,對它實現居中相對比較簡單,我們只需要設置它的實際高度height和所在行的高度line-height相等即可。
div {
height:25px;
line-height:25px;
overflow:hidden;
}
這段代碼很簡,後面使用overflow:hidden的設置是爲了防止內容超出容器或者產生自動換行,這樣就達不到垂直居中效果了。