關於圖片居中對齊的問題，進入前端行業雖然有一段時間了，以為自己懂了，可是實際上還是一知半解，找了一些博客來看了一下，但是感覺講的有點碎，看完還是一知半解。
查閱了一下《css權威指南》，結合遇到的問題，這才了解到前前后后的問題根源。
主要的問題如下：
1.line-height是個什么東西，范圍在哪里，具體應用於什么元素？
2.vertiacal-align和line-height有什么關系，元素對齊到底是一個什么樣的過程。
3.圖片對齊和文本對齊有什么區別？
4.浮動元素為什么對齊會出現問題？
-------》解答這些問題，牽涉的碎片化知識：
基線，底端，行內框，行框，行間距，替換元素及非替換元素，對齊
下面圍繞着上面的三個問題，以及相應的碎片化知識點來進行解析問題。
一般來說，之所以不了解vertical-align，是因為不清楚對齊后面的這些碎片化知識，而這些也是很多博客在解析的時候常常忽略的地方。
先說結論：
1.line-height是行高，主要作用是在文本上下行間距，基於文本產生影響文本元素位置的作用，對於行內元素的位置影響顯著，但是對於塊元素的影響甚微。
2.vertical-align和line-height的關系是：line-height是vertical-align的對齊依據。vertical-align主要是影響行內元素的對齊，不影響塊元素布局。
而決定行內元素對齊的有兩個因素，1.元素本身的height（類似於圖片和按鈕等替換元素）2.還有其他span、em非替換元素的line-height。行框通過計算height，line-height，來將各個行內元素與行內的基線進行對齊。
但是當產生浮動的時候，浮動會對行內元素的布局產生特殊影響，因此不會按照原先的方式來進行對齊，此時設置了vertical-align往往沒有效果。
3.圖片的對齊是將自己的底端，也就是圖片的最下端與行框的默認基線進行對齊，對齊依據是底端。影響圖片對齊的依據是圖片的height、padding、border大小。
而文本元素，例如<span>文本內容</span>，則是將自身的行內框基線與行框基線進行對齊，對齊依據是基線。影響行內文本元素的依據是line-height，以及元素自身的font屬性。
4.元素浮動之后實際上是從正常的文檔流中除去了（因此會出現高度塌陷，父容器收縮的問題），但是同時又對文檔產生着影響（最經典的就是環繞效果）。元素浮動類似於一個被除名的黑戶，雖然不在土地登記簿上，但是的的確確占用一塊地方，因此別的元素也不能因此占據浮動元素的空間，但是因為是黑戶，所以別的元素會環繞它，好像它不存在一樣。
元素浮動之后，會盡力往容器的左右兩側移動，盡可能地“漂”到容器的最高處。
因此此時行內元素浮動之后，浮動的規則會覆蓋vertical-align的規則，這個時候設置vertical-align往往會出現問題，最典型的就是對一個段落中的圖片進行浮動，然后設置vertical-align，但是發現往往不起作用。
但是文本元素浮動之后往往不會受到影響，因為line-height實際上還是作用於文本元素的，雖然文本元素的容器位置“漂”到其他位置，但是里面的文本因為line-height，仍然有行高，可以影響到行內元素的布局。
-------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------我是分割線---------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------
結論如何推導出來
看完這些結論，想必很多人也是一時之間有些不明白所以然，因為不同的人掌握的背景知識是不同的，而這些結論的關鍵恰恰是這些關鍵性的碎片化知識，它們起到了穿針引線的作用。下面來梳理一下，到底是怎么得出結論的。
-------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------我是分割線---------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------
1.核心問題：關於對齊
對齊涉及到兩個對象，要對齊元素及對齊對象，一個對象是不可能對齊。比如平常在戰隊，從高往低對齊，每個人都要有一個參考系，對着參考系進行對齊。
而行內元素的對齊，除了行內元素本身，還有一個參考系，這個參考系就是行框的基線，而行框的基線依據於行內框元素的基線位置。
1.1對齊延伸問題：什么是基線？
每一個文本元素自身都會有四條線，頂線，中線，基線，底線。而基線一般是指文本元素中以x字母為准，x字母的下邊緣為該文本元素的基線。
而行高則是兩個文本行基線之間的距離，往往使段落產生間距。
但是也可以這樣理解，行高 = 字體大小 + 上半行距 + 下半行距（其中上下半行距相等，這個等式可以從圖中推導出來）
每一個文本元素和文本行元素，都會有一條基線，基線的位置受到文本的字體格式以及line-height的影響。
1.2對齊延伸問題：什么是行框和行內框？
在每一個段落行內，不同的行內元素除了包裹自身內容的內容框之外，還會自動生成一個行內框，其中沒有標簽包裹的文本會生成匿名行內框，不同的行內框會根據各自不同的line-height產生行間距，而行框則會剛好包括最高的頂端和最低的底端，從而來生成行框。
行內框的基線很好計算，但是行框的基線如何計算呢？
行框的基線是立足於行內框中基線最低的元素，也就是line-height最大的文本元素。
下面的例子，可以測試出來，當設置其中一個行內文本元素的line-height超過其他行內元素的line-height的時候，整個容器會自動擴展，位置也會往下移動。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試行框基線</title>
<style>
p{border:1px solid red;line-height:20px;}
span{line-height:40px;} /*可以在瀏覽器中取消一下，觀察一下位置變動*/
</style>
</head>
<body>
<p>
<span>文本內容1</span> 匿名文本內容 <em>文本內容2</em> <img src="" alt="">
</p>
</body>
</html>
1.3對齊延伸問題：什么是替換元素。
替換元素是指元素的內容本身並非文檔直接表現的，換句話說，就是不同的頁面中，瀏覽器不能確定其具體內容的元素，比如圖片，按鈕，因為圖片的內容取決於圖片引用的src屬性源，按鈕的類型則依據於其input類型，因此瀏覽器是不能確定今天img元素里面是一張美女圖片，那么明天加載的頁面里面img是不是一張美女圖片。
除了替換元素，其他的元素就是非替換元素。非替換元素和替換元素在行框中的影響，主要是其高度計算方式，替換元素在行框中的位置是由其height，padding和border來決定，而非替換元素在行框中的位置則是其line-height和字體樣式。
1.4對齊延伸問題：圖片等替換元素在行框中有什么影響。
如果只有文本元素的話，那么行框是很好計算基線位置的，但是如果有圖片按鈕等替換元素的話，那么計算方式就會變的稍微復雜一些。
在css中，有兩種高度方式，一種是height，一種是line-height，這兩種會決定元素的高度和位置，對於圖片等行內替換元素來說，height是行框計算的依據，line-height對圖片、按鈕不會產生影響。
因此，如果有圖片在行內的話，那么圖片的底端會對齊文本的基線。
那么，如果圖片的高度高於其他行內框的整體高度，這個時候會發生什么呢？
圖片會在對齊原來的行框文本基線的基礎上，撐開高度，使行框最高點剛好包括圖片的頂端。
因此，當p段落里面的line-height都是40px的時候，加入圖片之后，行框的高度就會比沒有加入圖片之前多50px - 40px=10px高度，因此基線就會下移10px的高度。
<p style=”line-height:40px;”> <span>文本內容1</span> <em>文本內容2</em> <img src="img/img2.png" height="50px" width="50px" alt="高度圖片"> </p>
1.5對齊延伸問題：浮動對行內元素產生了什么樣的影響。
設置一個元素的浮動之后，元素會從正常的文檔流中去除，但是同時也會對原來的文檔流產生一些影響。
可以設想一下，在長方形區域的水面上，有很多人都想要有一個固定位置的水床（瀏覽器盒模型布局），但是固定水床需要登記（告訴瀏覽器的如何布局計算）。突然有一天，有一個人想要在長方形區域的最左側建一個水床（設置元素左浮動），它悄悄地從水底移動到最左側，把原先的水床擠走（浮動元素會盡可能移動在到容器最高處，及最左處或最右處），在最左側那里建了一所水床，沒有登記（沒有告知父容器高度，因此產生高度塌陷）。其他的人不知道，在去最左端的固定水床的時候，發現已經有人固定了，因此只能固定在它旁邊（浮動會產生環繞效果，而這一點就是因為浮動元素從正常文檔流中去除掉的原因）。
圖片是屬於替換元素，在行框中的計算中，是依據於圖片的高度，如果圖片進行浮動的話，對於行框來說，圖片不存在了，因此，行框還是依據原來的文本行基線來計算基線，進行對齊。
因此，效果如下
<p style=”line-height:40px;”> <span>文本內容1</span> <em>文本內容2</em> <img src="img/img2.png" height="100px" width="100px" alt="高度圖片"> </p>
圖片沒有浮動：
圖片左浮動：
沒有圖片：
2.對齊的過程
行內元素是默認設置的vertical-align為baseline，也就是基線對齊。當一個文本行開始渲染的時候，
1.首先瀏覽器會找出每一個元素的類型，是替換元素還是非替換元素
2.然后根據它們的height或者line-height以及字體大小來生成每個元素行內框
3.確定行內框基線位置，確定行框基線位置
4.根據每個元素是否設置vertical-align來進行對齊。
3.關於居中對齊
vertical-align：middle是將元素行內框的中點與父元素基線上方0.5ex處的一個點對齊，這里的1ex相對於元素的font-size來計算x字母的高度，1ex等於該字體下x的字母高度。
多數瀏覽器會將1ex處理為0.5em，也就是0.5倍字體大小font-size。
參考文檔：
《css權威指南》
張鑫旭文章：《css行高line-height的一些深入理解及應用》
原創文章，轉載請注明地址！！！