前面的話
line-height、font-size、vertical-align是設(shè)置行內(nèi)元素布局的關(guān)鍵屬性。這三個(gè)屬性是相互依賴的關(guān)系，改變行間距離、設(shè)置垂直對(duì)齊等都需要它們的通力合作。在CSS字體里面已經(jīng)詳細(xì)介紹了font-size的相關(guān)內(nèi)容，本文將主要介紹line-height與vertical-align。
line-height
定義
line-height行高是指文本行基線之間的距離。行高line-height實(shí)際上只影響行內(nèi)元素和其他行內(nèi)內(nèi)容，而不會(huì)直接影響塊級(jí)元素，也可以為一個(gè)塊級(jí)元素設(shè)置line-height，但這個(gè)值只是應(yīng)用到塊級(jí)元素的內(nèi)聯(lián)內(nèi)容時(shí)才會(huì)有影響。在塊級(jí)元素上聲明line-height會(huì)為該塊級(jí)元素的內(nèi)容設(shè)置一個(gè)最小行框高度
值: <length> | <percentage> | <number> | normal | inherit
初始值: normal
應(yīng)用于: 所有元素
繼承性: 有
百分?jǐn)?shù): 相對(duì)于元素的字體大小font-size
術(shù)語(yǔ)
要深入理解line-height，需要理解關(guān)于行框構(gòu)建的常用術(shù)語(yǔ)。
內(nèi)容區(qū)
對(duì)于行內(nèi)非替換元素或匿名文本某一部分，font-size和font-family確定了內(nèi)容區(qū)的高度。在宋體情況下，如果一個(gè)行內(nèi)元素的font-size為15px，則內(nèi)容區(qū)的高度為15px；而在其他字體情況下，內(nèi)容區(qū)的高度并不等于字體大小
行內(nèi)框
內(nèi)容區(qū)加上行間距等于行內(nèi)框。如果一個(gè)行內(nèi)非替換元素的font-size為15px，line-height為21px，則相差6px。用戶代理將這6像素一分為二，將其一半分別應(yīng)用到內(nèi)容區(qū)的頂部和底部，這就得到了行內(nèi)框
當(dāng)line-height小于font-size時(shí)，行內(nèi)框?qū)嶋H上小于內(nèi)容區(qū)
行框
行框定義為行中最高行內(nèi)框的頂端到最低行內(nèi)框底端之間的距離，而且各行框的頂端挨著上一行行框的底端
框?qū)傩?/strong>
內(nèi)邊距、外邊距和邊框不影響行框的高度，即不影響行高
行內(nèi)元素的邊框邊界由font-size而不是line-height控制
外邊距不會(huì)應(yīng)用到行內(nèi)非替換元素的頂端和底端
margin-left、padding-left、border-left應(yīng)用到元素的開(kāi)始處；而margin-right、padding-right、border-right應(yīng)用到元素的結(jié)尾處
替換元素
行內(nèi)替換元素需要使用line-height值，從而在垂直對(duì)齊時(shí)能正確地定位元素。因?yàn)関ertical-align的百分?jǐn)?shù)值是相對(duì)于元素的line-height來(lái)計(jì)算的。對(duì)于垂直對(duì)齊來(lái)說(shuō)，圖像本身的高度無(wú)關(guān)緊要，關(guān)鍵是line-height的值
默認(rèn)地，行內(nèi)替換元素位于基線上。如果向替換元素增加下內(nèi)邊距、外邊距或邊框，內(nèi)容區(qū)會(huì)上移。替換元素的基線是正常流中最后一個(gè)行框的基線。除非，該替換元素內(nèi)容為空或者本身的overflow屬性值不是visible，這種情況下基線是margin底邊緣
vertical-align
定義
vertical-align用來(lái)設(shè)置垂直對(duì)齊方式，所有垂直對(duì)齊的元素都會(huì)影響行高
值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit
初始值: baseline
應(yīng)用于: 行內(nèi)元素、替換元素、表單元格
繼承性: 無(wú)
百分?jǐn)?shù): 相對(duì)于元素的行高line-height
[注意]IE7-瀏覽器中vertical-align的百分比值不支持小數(shù)行高，且取baseline、middle、text-bottom等值時(shí)與標(biāo)準(zhǔn)瀏覽器在展示效果不一樣，常用的解決辦法是將行內(nèi)元素設(shè)置display:inline-block
CSS Code復(fù)制內(nèi)容到剪貼板
- vertical-align:baselinebaseline(元素的基線與父元素的基線對(duì)齊)
- vertical-align:sub(降低元素的基線到父元素合適的下標(biāo)位置)
- vertical-align:super(升高元素的基線到父元素合適的上標(biāo)位置)
- vertical-align:bottombottom(把對(duì)齊的子元素的底端與行框底端對(duì)齊)
- vertical-align:text-bottom(把元素的底端與父元素內(nèi)容區(qū)域的底端對(duì)齊)
- vertical-align:top(把對(duì)齊的子元素的頂端與行框頂端對(duì)齊)
- vertical-align:text-top(把元素的頂端與父元素內(nèi)容區(qū)域的頂端對(duì)齊)
- vertical-align:middle(元素的中垂點(diǎn)與父元素的基線加1/2父元素中字母X的高度對(duì)齊)
- vertical-align:(+-n)px(元素相對(duì)于基線上下偏移npx)
- vertical-align:x%(相對(duì)于元素的line-height值)
- vertical-align:inherit(從父元素繼承vertical-align屬性的值)
[注意]<sub>和<sup>默認(rèn)攜帶樣式vertical-align:sub/super
inline-block底部空隙
inline-block元素在塊級(jí)元素中留空隙就是因?yàn)閳D像的默認(rèn)垂直對(duì)齊方式是基線對(duì)齊(基線對(duì)齊在原理上圖像底邊與匿名文本大寫(xiě)英文字母X的底邊對(duì)齊)；而匿名文本是有行高的，所以X的底邊距離行框有一段距離，這段距離就是圖像留出的空隙
于是，解決這個(gè)問(wèn)題有以下幾個(gè)解決辦法
[1]display:block
因?yàn)榇怪睂?duì)齊方式只能作用于替換元素和行內(nèi)元素，更改為塊級(jí)元素，會(huì)使垂直對(duì)齊方式失效
[2]父級(jí)的line-height: 0
這樣使匿名文本與行框的距離為0
[3]vertical-align: top/middle/bottom
應(yīng)用
【1】單行文本水平垂直居中
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- div{
- line-height: 100px;
- width: 100px;
- text-align: center;
- border: 1px solid black;
- }
-
- <div>測(cè)試文字</div>
[注意]好多地方都寫(xiě)著單行文本垂直居中是將高度和行高設(shè)置成一樣的值，但高度其實(shí)是沒(méi)有必要設(shè)置的。僅僅設(shè)置行高就可以，文字在一行中本身就是垂直居中顯示掃
【2】圖片近似垂直居中
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- div{
- line-height: 200px;
- text-align: center;
- }
- img{
- vertical-align: middle;
- }
- <div>
- <img src="#" alt="#">
- </div>
由于字符X在em框中并不是垂直居中的，且各個(gè)字體的字符X的高低位置不一致。所以，當(dāng)字體大小較大時(shí)，這種差異就更明顯
[注意]IE7瀏覽器在寫(xiě)塊級(jí)元素包含行內(nèi)元素時(shí)一定要寫(xiě)成換行寫(xiě)法，而不要寫(xiě)在一行
//正確1<div> <img src="#" alt="#"></div>//正確2<div><img src="#" alt="#"><!-- 這里要折行或空格 --></div>//錯(cuò)誤<div><img src="#" alt="#"></div>
【3】圖片完全垂直居中
在方法2的基礎(chǔ)上設(shè)置塊級(jí)元素的font-size為0，則可以設(shè)置圖片完全垂直居中
div{ line-height: 200px; text-align: center; font-size: 0;}img{ vertical-align: middle;}
<div> <img src="#" alt="#"></div>
【4】多行文本水平垂直居中
由于方法3設(shè)置font-size為0的局限性，塊級(jí)元素里面無(wú)法放置文本。方法4主要通過(guò)新增元素來(lái)實(shí)現(xiàn)垂直居中效果，該方法也可用于圖片的水平垂直居中
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- div{
- height: 100px;
- width: 200px;
- background-color: pink;
- text-align: center;
- }
- span{
- display:inline-block;
- vertical-align: middle;
- line-height: 20px;
- width: 100px;
- }
- i{
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- }
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div>
- <i></i><span>我是特別長(zhǎng)的特別長(zhǎng)的特別長(zhǎng)的特別長(zhǎng)的多行文字</span>
- </div>
【5】圖標(biāo)和文本對(duì)齊
<方法一>使用長(zhǎng)度負(fù)值
img{ vertical-align: -5px;}
根據(jù)實(shí)踐經(jīng)驗(yàn)，20*20像素的圖標(biāo)后面跟14px的文字，vertical-align設(shè)置為-5px可以達(dá)到比較好的對(duì)齊效果
<方法二>使用文本底部對(duì)齊
img{ vertical-align: text-bottom;}
使用baseline會(huì)使圖標(biāo)偏上；使用top/bottom會(huì)受到其他行內(nèi)元素影響造成定位偏差；使用middle需要恰好的字體大小且兼容性不高；使用text-bottom較合適，不受行高及其他內(nèi)聯(lián)元素影響
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
原文：http://www.cnblogs.com/xiaohuochai/p/5271217.html
