height vs line-height

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的設置是爲了防止內容超出容器或者產生自動換行,這樣就達不到垂直居中效果了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章