對齊的根本——淺談行盒

當咱們在一個li元素，或者div元素中填寫文本信息的時候，一般會將其居中，使得頁面看上去更加的美觀。橫向居中不用說，方法不少，使用margin,padding,test-align等等方式均可以完成。而縱向居中除了margin,padding等手段以外，最好用的，莫過於line-height.

在咱們的盒模型中，有一類叫作行盒。它的默認高度與咱們的元素盒一致，當咱們須要改變文本的縱向排列時，改變它的大小便可順利完成。在對文字進行居中排列時，只須要將行高設置爲父元素的高度，十分簡單，就很少說了。我這裏要說的是圖片與文字的對齊。

在使用CSS進行圖片與文字的對齊操做中，咱們通常會使用「vertiacl-align:middle」代碼來完成。這種方式是基於行盒的對齊參考線來進行的，由於圖片與文字在行盒中默認的對齊參考線是基線，只要將參考線改變成中心線就能夠作到。

可是這一步操做並非萬能的，它是會出錯的！

下面咱們就用實際例子來講明一下：

首先，我寫一個a標籤，爲了讓這個a標籤居中，我使用了行高來進行縱向排列。

接下來，我又在a標籤的後面插入了一個圖片，這個圖片的高度與咱們的父元素div是相同的。在插入之後，a標籤再也不居中，而是跑到了下面，這個就是以基線爲參考線的結果。

如今，我來使用「vertiacl-align:middle」對它們進行排列。結果。。。

個人圖片往下面移動了1px。。。。。

解決方法很簡單，將以前所設置的行高刪除便可。可是形成這種現象的緣由是什麼呢，我又進一步作了測試，發現當我以前的行高設置的越大，圖片下移得越多。可是，當以前行高恰好加上a標籤超出父元素的高度時與父元素高度相等時，也不會發生這種現象。好比，我父元素高度爲35px,行高設置爲33px,不會出現圖片下移的狀況。

由此咱們能夠得出結論，是行盒的影響形成了這種現象。

在文字與圖片同時存在的狀況下，行盒的高度是全部元素行盒的最大值，並不區分元素的類別，也就是說如今行盒的高度實際上是這樣的：

能夠看到，當咱們以前給a標籤設置了行高，在插入另外一張圖片以後，他的實際行高其實已經超過了咱們的父元素高度！行盒的中心線也偏離了父元素的中心線。

因而乎，在使用「vertiacl-align:middle」進行對齊操做的時候，就出現了圖片下移的現象