深入理解CSS行高line-height與文本垂直居中的原理

前言
在CSS中,line-height 屬性設(shè)置兩段段文本之間的距離,也就是行高,如果我們把一段文本的line-height設(shè)置為父容器的高度就可以實(shí)現(xiàn)文本垂直居中了,比如下面的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 300px;
height: 200px;
border: 1px solid red;
}
span {
line-height: 200px;
}
</style>
</head>
<body>
<div>
<span>文本垂直居中原理</span>
</div>
</body>
</html>
這樣,span標(biāo)簽中的文字就相對(duì)于div垂直方向居中了,想要文本水平居中設(shè)置text-align:center即可。
那么,它怎么就垂直居中了?為了弄清楚它,下面我們先來看幾個(gè)概念。
1. 行框
在瀏覽器中,會(huì)將給每一段文本生成一個(gè)行框,行框的高度就是行高。行框由上間距、文本高度、下間距組成,上間距的距離與下間距的距離是相等的。
默認(rèn)情況下一行文本的行高分為:上間距,文本的高度,下間距,并且上間距是等于下間距的,所以文字默認(rèn)在這一行中是垂直居中的。
2. 文本中的幾條線
幾條線與行高的關(guān)系圖解:
文本的行高也可以看成是基線到基線的距離。
如果一段文本的高度為16px,如果給他設(shè)置line-height的高度為200,那么相當(dāng)于,文本的上下間距的高度增加了,但是文本本身的高度依然是16是不變的,并且一直默認(rèn)在行框中垂直居中,而上間距和下間距平分了200px的高度并且減去文本本身的高度。所以,容器被這一行文本占滿,而本身文字在自己的一行中是垂直居中的,所以看起來就像是在容器中垂直居中。
3. Chrome瀏覽器的默認(rèn)值
谷歌瀏覽器字體的默認(rèn)大小是:16px,字體的最小值為:12px,默認(rèn)行高為:18px;默認(rèn)情況下如果沒有給div設(shè)置高度,那么這個(gè)div的高度會(huì)比其中文本的大小大一點(diǎn)(這個(gè)大多少現(xiàn)在沒有辦法確定)
4. 行高的單位
px(像素)
設(shè)置起來是最直接的,同時(shí)也最方便的。
%(百分號(hào))
如果line-height單位設(shè)置為%,那么將來在計(jì)算的時(shí)候,基數(shù)是當(dāng)前標(biāo)簽中的文本的字體的大小。
如果是%,%之前的數(shù)據(jù)一定是整數(shù) :150% ,200%
em
效果跟%是一樣一樣的。
注意:一行em的大小相當(dāng)于是當(dāng)前標(biāo)簽中的font-size的大小。
如果是em,em之前的數(shù)據(jù)一定是:1.2em ,1.5em ,2em
不帶單位
如果不涉及到繼承,那么帶不帶單位(em)都是一樣的效果,但是如果涉及到繼承的話,那么就有很大的區(qū)別了:
1、如果單位是em,那么將來在繼承的時(shí)候,我們的瀏覽器會(huì)先將行高對(duì)應(yīng)的具體的數(shù)值計(jì)算出來以后再繼承。
2、如果沒有單位,那么將來在繼承的時(shí)候,我們的瀏覽器會(huì)先將line-height這個(gè)屬性繼承給子元素,再在子元素的font-size來計(jì)算。line-height: 1.5。
5.行高可以被繼承
我們知道,CSS的三大特性是繼承、層疊、優(yōu)先級(jí)。line-height也是可以被繼承的,如下面的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
/*line-height: 20px;*/
}
</style>
</head>
<body>
<div class="father">
<div class="children">豐趣海淘</div>
</div>
</body>
</html>
接著我們給div設(shè)置一個(gè)行高等于20px
.father {
line-height: 20px;
}
我們?cè)賮砜纯?children標(biāo)簽的的變化,.children標(biāo)簽的文字行高變成20px了
而且,不管我們給行高設(shè)置什么單位(px、%、em、不帶單位)都可以被繼承。
6. 行高計(jì)算的基數(shù)
如果行高的單位不是px,那么將來行高要進(jìn)行計(jì)算:這個(gè)計(jì)算需要一個(gè)基數(shù),這個(gè)基數(shù)是當(dāng)前標(biāo)簽的字體大小,而不是瀏覽器默認(rèn)字體大小。以上面的例子為例,我們并沒有設(shè)置任何字體大小,此時(shí)我們把line-height設(shè)置為150%,那么文字的行高將變?yōu)?4px(16px*1.5=24)。
div {
line-height: 150%;
}
此時(shí)我們?cè)诮odiv設(shè)置一個(gè)font-size等于20px:
div {
line-height: 150%;
font-size:20px;
}
那么文字行高將會(huì)變成30px,20px*1.5=30px;
總結(jié)
以上就是CSS行高(line-height)及文本垂直居中原理的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家學(xué)習(xí)CSS能有所幫助,如果各位有什么疑問歡迎留言探討,小編會(huì)盡快給大家回復(fù)的。
相關(guān)文章
解決line-height=height元素高度但是文字并沒有垂直居中的問題
這篇文章主要介紹了解決line-height=height元素高度但是文字并沒有垂直居中的問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的2020-08-19- 我們?cè)赾ss編寫中需要對(duì)大篇幅的內(nèi)容顯示的更好看,有些間隔,不要在擠在一起難看,就可以使用Line-Height屬性進(jìn)行控制2013-07-20
line-height使文本居中的3像素bug問題-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
雖然題目這么寫,可是這真是bug嗎?我覺得不算。 line-height使文本居中的3像素bug,先查下這3px的底細(xì),怎么查?觀察 FW 先寫個(gè)height、line-height都為30px,背景2008-10-17詳解HTML中字體使用line-height依然不能垂直居中解決辦法
這篇文章主要介紹了詳解HTML中字體使用line-height依然不能垂直居中解決辦法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友2020-08-20