關於CSS中的line-height等於容器高為什麼會居中
阿新 • • 發佈:2019-01-06
大家都用過line-height
,可以實現垂直文字居中:
//html
<p>
這是文字
</p>
//css
p{
height: 40px;
line-height: 40px;
border: 1px solid red;
font-size: 20px;
}
當然還可加入text-align:center
讓它水平居中
一、line-height定義
引入一張網路圖:
[來源][https://www.jianshu.com/p/6e4d683f6cf2]
簡單來說就line-height = 上間距+文字高+下間距
二、為什麼會居中
因為
上間距+文字高+下間距= line-height = 邊框高
上間距 = 下間距(我猜瀏覽器計算時候應該是 (line-height - 文字高)/ 2 計算上下間距的)
也可以把line-height看成一個盒子(只是一個比喻,跟盒子模型沒關係)的高,就是整個盒子佔據了所有的高,文字在那個盒子中是居中的,所以在那個盒子也是居中的。
三、拓展
試著想下,當line-height<font-size的時候會發生什麼
//html <p> 這是文字 </p> //css p{ height: 40px; line-height: 10px; border: 1px solid red; font-size: 20px; }
間距 = (line-height - 文字高)/ 2 = (10 - 20)/ 2 = -5 px
上下邊距都是 -5px。
結果: