文本垂直對齊

行高

line-height屬性是制定文本行基線之間的距離，而不是字體的大小，它確定了將各個(gè)元素框的高度增加或減少多少。line-height控制了行間距，這是文本行之間超出字體大小的額外空間。換句話說，line-height值和字體大小之差就是行間距。

在應(yīng)用到塊級元素時(shí)，line-height定義了元素中文本基線之間的最小距離。注意它定義的是最小距離，而不是一個(gè)絕對數(shù)值，文本基線拉開的距離可能比line-height值更大。line-height并不影響替換元素布局，不過確實(shí)可以應(yīng)用到替換元素。

構(gòu)造文本行

行內(nèi)框

文本行中的每個(gè)元素都會生成一個(gè)內(nèi)容區(qū)，這由字體的大小確定。這個(gè)內(nèi)容則會生成一個(gè)行內(nèi)框(inline box),如果不存在其他因素，這個(gè)行內(nèi)框就完全等于該元素的內(nèi)容區(qū)。由line-height產(chǎn)生的行間距就是增加或減少各行內(nèi)框高度的因素之一。要確定一個(gè)給定元素的行間距，只需要將line-height的計(jì)算值減去font-size的計(jì)算值。這個(gè)值就是總的行間距。行間距可能為負(fù)。行間距再除以2，將間距的一半分別應(yīng)用到內(nèi)容區(qū)的頂部和底部。其結(jié)果就是該元素的行內(nèi)框。

行框

一旦給定內(nèi)容行已經(jīng)生成了所有行內(nèi)框，接下來在行框的構(gòu)造中就會考慮這些行內(nèi)框。行框的高度恰好足以包含最高行內(nèi)框的頂端和最低行內(nèi)框的底端。

指定line-height值

line-height如果取默認(rèn)值normal，用戶代理必須計(jì)算行間的垂直空間。不同的用戶代理計(jì)算出的值可能不同，不過通常都是字體大小的1.2倍，這使得行框要高于給定元素的font-size值。

行高和繼承

當(dāng)一個(gè)塊級元素從另一個(gè)元素繼承l(wèi)ine-height時(shí)，問題會變得更為復(fù)雜。line-height值從父元素繼承時(shí)，要從父元素計(jì)算而不是在子元素計(jì)算 。

body {font-size:10px;}

div {line-height:1em;}

p {font-size : 18px}

<div>

<p>

這段文字從div繼承了line-height，div的字體大小時(shí)10，所以計(jì)算出來的大小是10px。

</p>

</div>

解決這個(gè)問題的一種方式是設(shè)置縮放因子，縮放因子將是繼承值而不是計(jì)算值。這個(gè)數(shù)會應(yīng)用到該元素及其所有子元素，所以各元素都根據(jù)其自己的font-size計(jì)算line-height。

body {font-size : 10px;}

div {line-height : 1.5;}

p {font-size:18px;}

盡管看上去，line-height在每個(gè)文本行的上面和下面平均分配了額外空間，實(shí)際上，它是在行內(nèi)元素的內(nèi)容區(qū)頂部和底部增加（或減少）一定量來創(chuàng)建一個(gè)行內(nèi)框。

垂直對齊文本

在CSS中，vertical-align 屬性只應(yīng)用于行內(nèi)元素和替換元素，如圖像和表單輸入元素。vertical-align屬性不能繼承。

vertical-align 只接受8個(gè)關(guān)鍵字，一個(gè)百分比數(shù)字或者一個(gè)長度值。

基線對齊

baseline要求一個(gè)元素的基線與其父元素的基線對齊。如果一個(gè)垂直對齊元素沒有基線，比如圖片輸入框，那么該元素的低端與其父元素的基線對齊。

這個(gè)對齊規(guī)則很重要，因?yàn)樗沟靡恍﹚eb瀏覽器總把替換元素的底邊放在基線上，即使該行中沒有其他文本。例如，假設(shè)一個(gè)表單元格中只有一個(gè)圖像。這個(gè)圖像可能實(shí)際在基線上，不過在某些瀏覽器中，基線下面的空間會導(dǎo)致圖像下出現(xiàn)一段空白。另外一些瀏覽器則會把圖像“緊包”在表單元格中，所以不會出現(xiàn)空白。

上標(biāo)和下標(biāo)

vertical-align:sub 聲明會使一個(gè)元素變成下標(biāo)，這意味著其基線（或者如果這是一個(gè)替換元素，則是其低端）相對于其父元素的基線降低。規(guī)范并沒有定義元素降低的距離，所以對于不同的用戶代理，這個(gè)距離可能有所不同。super更sub相反，相對父基線升高。

sub和super不會改變元素字體大小，下標(biāo)或者上標(biāo)元素中的所有文本默認(rèn)地都應(yīng)當(dāng)與父元素中的文本大小相同。

底端對齊

bottom將元素行內(nèi)框的低端與行框的低端對齊。

text-bottom 是指行內(nèi)文本的底端。替換元素或任何其他類型的非文本元素會忽略這個(gè)值。對于這些元素（替換元素或者非文本元素），將考慮一個(gè)“默認(rèn)”的文本框。這個(gè)默認(rèn)框由父元素的font-size得到。要對齊的元素的行內(nèi)框底端再與這個(gè)默認(rèn)文本框的底端對齊。

頂端對齊

top與bottom相反，text-top與text-bottom相反

居中對齊

middle 往往（不總是）應(yīng)用于圖像。middle會把行內(nèi)元素框的中點(diǎn)與父元素基線上方0.5ex處的一個(gè)點(diǎn)對齊，這里的1ex相對于父元素的font-size定義。因?yàn)榇蠖鄶?shù)用戶代理都把1ex處理為0.5em，middle往往將元素的垂直中點(diǎn)與父元素基線上方0.25em處的一個(gè)點(diǎn)對齊。不過有些瀏覽器確實(shí)會計(jì)算準(zhǔn)確的x-height。

百分?jǐn)?shù)

使用百分?jǐn)?shù)，會把元素的基線（或替換元素底邊）相對于父元素的基線升高或降低制定的量（你制定的百分?jǐn)?shù)要計(jì)算為該元素line-height的百分?jǐn)?shù)，而不是相對于其父元素的line-height）。正則升高，負(fù)則降低。

長度對齊

它把一個(gè)元素升高或降低指定的距離，與對齊前相比。要認(rèn)識到垂直對齊的文本并不會成為另一行的一部分，它也不會覆蓋其他行中的文本。所有垂直對齊的元素都會影響行高。應(yīng)該記得行框的描述，其高度要足以包含最高行內(nèi)框的頂端和最低行內(nèi)框的低端。這包括因垂直對齊上升或下降的行內(nèi)框。

更多信息請查看IT技術(shù)專欄