前言
前端開發中我們經常會遇到文字垂直居中的場景，這是候我就會使用line-height，vertical-align等css屬性去調整文字的位置，但是實際我對這塊內容一直是比較模糊的，未免有一些一葉障目了，因此在這裡對這塊內容進行整理總結，希望之後再遇到此類情況時可以做到成竹在胸。
在進入本文正題之前，我們需要了解一下字型的簡單概念，和我們小時候在四線簿上寫字是一樣的，在瀏覽器中，字型的展示也是有四條線的，我們將其稱為 top middle base bottom，而我們下面所介紹的css屬性都是與這四條線相關的，在網上找了一張圖，四條線大抵是這樣的。
基線就是圖中標紅的那個線，所有字元都基於這條線進行定位。在各種內聯相關模型中，凡是涉及到垂直方向的排版或者對齊的，都離不開基線。而基線的定位**於字母中的x，x的下邊緣就是基線的位置，而基線與中線的之間的距離也被稱為x-height就是小寫x的高度。1ex就是x-height的值。
除了平常我們經常能接觸到的盒模型（block-box），line box是就相對來的陌生了，下面我用一張圖來介紹line-box
每行內容由多個內聯元素組成，每一行都叫做乙個 line-box。而一行中包含了很多子元素，我們稱之為inline-box，inline-box不會讓內容成塊顯示，而是排成一行。inline-box一般有兩種，內聯標籤或者是包含文字的匿名內聯元素。每它的高度，由行內最大line-height決定。
鋪墊了不少，我們現在就是進入正題吧。
content-area是指文字內容區域，它的大小和文字的大小，字型型別有關。
前端開發中我們會使用font-size來設定文字的大小，假設那麼我們設定的字型是12px，就代表著top line（頂線）和bottom line（底線）的距離為12px。同時引入啦em這個單位，1em也就是這個font-size的值。
前端開發中我們會使用font-family來設定文字的字型，不同的字型所展示的content-area也會導致不同，就像下面的所示，當然這塊顯示背景的區域不算是完整意義上的content-area，只是因為在高度未設定的情況下，content-area的高度和line-height相同罷了。
line-height是指文字行基線間的垂直距離，它決定line-box的高度，由於我們看不見line-height和content-area的高度，行高同時決定來文字之間的間距，line-height的預設值normal，就是為了設定乙個合適的行間距。
我們上面已經了解了，line-heght在height未固定是和content-area相一致的，而當高度確定時line-heght 和 content-area 高度會有一定差異，而這個差異就叫做 leading，leading是可正可負的，意味著實際行高可能低於文字的內容高度。leading和我們下面要介紹的行距類似，都是被查拆兩分，加到內容的兩端，區別在於，半間距是加在font-size的兩端，leading是加在content-area兩端（這部分可能有點繞）用偷來的圖表示如下
因此當line-height 和height相等時由於會有半行距，文字會自然垂直居中。
vertical-align也是我們在文字對齊中，經常使用的乙個屬性，與text-align類似，vertical-align代表這個文字在垂直方向的位置。vertical-align的預設值為baseline，代表著文字的是以baseline進行定位的，我們有時會利用vertical-align：middle來實現元素的居中也就是元素上、下邊的中點與行盒子基線加上x-height的一半對齊。用下圖可以更清晰的表達，不同值元素對應的位置。
而vertical-align，取值是百分數值時，是相對於此標籤繼承的line-height值決定的。
vertical-align的其他屬性，這裡就不贅述啦，感興趣的可以去專業的w3c規範裡尋找。
vertical-align起作用是有前提條件的就是vertical-align只能應用於inline,inline-block,table-cell的元素。在css中，如果設定一些類似float,position: absolute之類的樣式，會改變元素的display值從而導致vertical-align也就失去作用。
了解了行盒子的上下邊界也就是我們就可以設定行內元素的line-height和行盒子的高度一致，就可以使得不用字型大小的文字進行居中。
針對這個問題我需要了解行內元素的基線如果乙個inline-block元素，裡面沒有內聯元素，或者overflow不是visible，則該元素的基線是其margin底邊緣；否則其基線就是元素裡面最後一行內聯元素的基線。我們只需要將第乙個元素的vertical-align設定為top這樣兩者就想上對齊啦，在包裹乙個父元素使其居中即可
1.css深入理解vertical-align和line-height的**關係
2.深入理解 css：字型度量、line-height 和 vertical-align
關於文字對齊的問題，就寫到這裡啦，作為css中算是最複雜的一塊內容了，經過這一次總結，我對於文字的展示形式也有了乙個比較深刻的印象，之後如果有遇到這類問題，也會做乙個記錄總結。這篇文章是我個人的總結和理解，內容中可能存在一些不合理不正確的地方，希望各位不吝指正。
如何讓div靠右 css怎麼設定右對齊？
css設定右對齊的方法 1 使用cssposition屬性實現右對齊。2 通過float屬性實現右對齊。3 通過text align屬性實現右對齊。通過css設定右對齊方法詳解 1 通過css的position屬性實現右對齊 以下例項演示了如何使用 position 來實現右對齊 元素右對齊 css...
靠右對齊的導航選單減慢閱讀速度
網頁的 導航選單 的設計有 什麼要訣？其實 就是文字靠右對齊 這樣的選單令使用者讀起來更容易，使用者的眼睛往往迅速地沿著選單的左手邊向下移動，只有當最左邊的乙個或兩個字詞吸引了他們的注意，他們才會閱讀選單項目的其餘部分。因此，我們有以下的選單設計指引，這至少對於垂直設計的選單是有效的 選單專案應該靠...
元素 float right 後右對齊換行原因
eval title eval dateline span這樣.的內容到了.下一行，典型的問題就是新聞列表中題目和日期錯行！這個問題出現在ie8的相容模式下，ie8和火狐都沒有問題。當非float的元素和float的元素在一起的時候，如果非float元素在先，那麼float的元素將被排斥 也就是說，...