vertical-align

先看一個(gè)例子

<div id="text" style="border: 1px solid #ccc;height:15rem;">
    <span style="vertical-align:bottom;border: 1px solid #ccc;display:inline-block;height:2rem">假設(shè)我是一個(gè)有內(nèi)容的inline-block</span>
    <span style="border: 1px solid #ccc;font-size:5rem;vertical-align:baseline;">我的fontSize=5rem</span>
    <span style="vertical-align:baseline;border: 1px solid #ccc;display:inline-block;height:2rem;width:1rem;"></span>
    我是一個(gè)不存在的x
</div>

測(cè)試圖片

• baseline(默認(rèn)值)
  基線,盒子的基線大約在其內(nèi)部文字(匿名)盒子英文字母X的下邊緣(不同的字體不同),img標(biāo)簽和空盒子的基線盒子的下邊緣,在比如上圖中的line盒子的基線就是上圖中我是一個(gè)不存在的x中x的下方,第一個(gè)span的基線就在英文字母i的下邊緣,第二個(gè)span的基線就在盒子的下邊緣,設(shè)置為baseline就是讓盒子本身的基線和line盒子的基線對(duì)齊
• top
  頂線,盒子自身的頂部,設(shè)置為top是讓盒子自身的頂線和line盒子的頂線對(duì)齊
• bottom
  底線,盒子自身的底部,設(shè)置為top是讓盒子自身的底線和line盒子的低線對(duì)齊
• middle
  中線,盒子自身的中間,注意設(shè)置此值不是和line盒子的中線對(duì)齊,注意設(shè)置此值不是和line盒子的中線對(duì)齊,注意設(shè)置此值不是和line盒子的中線對(duì)齊
  w3cshoole直接說(shuō),middle是把此元素放置在父元素的中部,這應(yīng)該是不對(duì)的
  應(yīng)該是和line盒子中文字(匿名)小寫(xiě)x字母的中線對(duì)齊,line盒子中文字(匿名)小寫(xiě)x字母的中線對(duì)齊,line盒子中文字(匿名)小寫(xiě)x字母的中線對(duì)齊,比如這樣
  
  測(cè)試圖片
  
  如果比文字(匿名)盒子高的盒子設(shè)置為middle,會(huì)讓文字(匿名)盒子上浮,盒子的基線也會(huì)改變,可以理解為比文字(匿名)盒子高的盒子與line盒子中文字(匿名)小寫(xiě)x字母的中線對(duì)齊后,比文字(匿名)盒子高的盒子下沉,line盒子的高度也跟著下沉,比如這樣
  
  測(cè)試圖片
  
  middle的值只和文字(匿名)有關(guān),我覺(jué)得和屬性的名字不相符,也搞得很復(fù)雜,難道是我理解的問(wèn)題?后面會(huì)說(shuō)用middle和line-height居中對(duì)齊
• text-top
  元素本身的基線與line盒子中文字(匿名)的頂端對(duì)齊,注意不是文字所在的匿名文字盒子的頂端
• text-bottom
  元素本身的基線與line盒子中文字(匿名)的底端對(duì)齊,注意不是文字所在的匿名文字盒子的底端
• sub
  元素本身的基線與line盒子中文字(匿名)的下標(biāo)對(duì)齊
• super
  元素本身的基線與line盒子中文字(匿名)的上標(biāo)對(duì)齊
• 數(shù)值(支持負(fù)值)
  元素本身基于line盒子基線的偏移
• 百分比
  和數(shù)值一樣,不過(guò)基于父元素的line-height計(jì)算,也就是line盒子中文字盒子(匿名)的line-height

line-height

line-height顧名思義,我覺(jué)得就是設(shè)置line盒子的最低高度,比如下圖中,設(shè)置div的line-height為3rem就是設(shè)置div盒子中l(wèi)ine盒子的最低高度為3rem,設(shè)置span的line-height為5rem就是設(shè)置span盒子中l(wèi)ine盒子的最低高度為5rem

測(cè)試圖片

<div id="text" style="border: 1px solid #ccc;position:absolute;height:8rem;line-height:3rem;">
    <span style="vertical-align:baseline;border: 1px solid #ccc;display:inline-block;font-size:1rem;line-height:5rem;">我的line-height為5rem</span>
    我是第一行我的line-height為5rem
    <br/>
    我是第二行我的line-height為3rem
</div>

div中有兩個(gè)line盒子,第一個(gè)是由內(nèi)部撐開(kāi)的5rem,第二個(gè)是設(shè)置div的3rem
紅框我把它稱(chēng)作行內(nèi)間距,注意是行內(nèi)間距,不是行間距,不是line盒子和line盒子之間的間距,我的理解是line盒子和line盒子之間是沒(méi)有間距的,但是line盒子本事,有行內(nèi)上間距和行內(nèi)下間距,他們是相等的,都等于(line盒子的高度-font-size)/2,上面一共有六個(gè)行內(nèi)間距,div盒子內(nèi)兩行的4個(gè)和span盒子中一行的2個(gè)
line-height常用的值有normal(初始值),數(shù)字(不是數(shù)值),數(shù)值(px,em...),百分比,inherit(默認(rèn)值)

• inherit(默認(rèn)值)
  繼承父元素的值
• normal(初始值)
  這個(gè)值在不同的font-size和瀏覽器下有所不同,一般為1.2左右
• 數(shù)字(推薦使用)
  1,1.1,1.2,1.3...這個(gè)值是自身font-size的倍數(shù),比如設(shè)置為1,那么行內(nèi)間距就會(huì)(line-height-font-size)/2=0,所以看起來(lái)文字之間就會(huì)沒(méi)有間距
• 數(shù)值
  設(shè)置固定的數(shù)值,如果設(shè)置為em,就會(huì)根據(jù)當(dāng)前盒子font-size的大小計(jì)算出一個(gè)固定的值,后代會(huì)繼承此值
• 百分比
  還是設(shè)置固定的數(shù)值,根據(jù)當(dāng)前font-size的大小計(jì)算,后代會(huì)繼承此值

記錄幾種用line-height和vertical居中的方法

• 單行文字在blcok中居中
  設(shè)置外部block的line-height和height相等,可以不設(shè)置height的值,設(shè)置了line-height,height會(huì)自動(dòng)計(jì)算等于line-height
• 多行文字在block中居中
  同樣設(shè)置外部block的line-height和height相等,將內(nèi)部包含文字的block元素display:inline-block;line-height:normal;vertical-align:middle;如下圖所示
  
  測(cè)試圖片

<div id="text" style="border: 1px solid #ccc;position:absolute;height:8rem;line-height:8rem;">
    <p style="line-height:normal;vertical-align:middle;display:inline-block">我是多行文字<br/>我真的是多行<br/>其實(shí)只有三行了</p>
</div>

其實(shí)上面的并不是真正的垂直居中,只是近似垂直居中,因?yàn)樽帜竫的中間并不一定是line盒子的中間,會(huì)稍微偏下一點(diǎn)點(diǎn),要真正的垂直居中,要將外部block盒子的font-size設(shè)為0,內(nèi)部block盒子的font-size設(shè)置為正常值就是真正的垂直居中了

• 單個(gè)圖片
  和上面的一樣,圖片本身就是inline-block