圖檔和文字垂直方向不對齊的問題

或許很多人一開始學前端時都會覺得CSS簡單，沒錯，CSS沒有語言邏輯，入門确實很簡單，可要是想深入挖掘的話……嘿嘿，水可深着呢！

就比如說今天要跟大家分享的這個，表面上看可能覺得也沒多大問題，但是就是這個不太起眼的“小玩意”，困擾了我很久……

接下來我們步入正題~~

比如說，現在我要做一個簡單的删除按鈕，隻由一個icon和“删除”兩個字組成，你會如何布局，給你30秒時間考慮。

好，先亮出HTML代碼如下：

<div class="del"><span class="icon"></span><span>删除</span></div>
           

很簡單，就是一個class為del的div元素下有兩個span标簽，當然icon你也可以直接用僞元素代替（還不知道僞元素的面壁思過去...）。

接下來你可能會這麼寫CSS：

.del{ font-size: 18px;}
.del .icon{ display: inline-block; width: 16px; height: 24px; margin-right: 5px;
background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
           

然後它就變成這個樣子了：

咦？好像跟想象的不太一樣啊！為什麼圖檔和文字垂直方向上不能對齊呢？Why?

這是因為圖檔和文字在行内垂直方向預設是以基線（baseline）對齊的，圖檔基線在圖檔底部，而文字基線卻在文字中點偏下的位置，是以才會顯示成上圖的樣子。那麼這個問題該如何解決呢？

很簡單，我們隻需給圖檔和文字分别加上 vertical-align: middle即可：

.del .icon{ display: inline-block; width: 18px; height: 24px; margin-right: 5px; 
vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}
           

這樣的話，圖檔和文字就以其中心線對齊了：

說到這裡，其實本文基本已經結束了，但是經過本人親測發現，在移動端卻會發現圖檔和文字又會出現不對齊的情況了，但這隻是部分浏覽器出現的相容性問題，解決方法也是有的，就是在設定文字字型大小和icon大小時盡量設定為5的整數倍，并盡量讓icon高度與字型大小相同。那麼本例的代碼将寫成下面這樣：

.del{ font-size: 20px;}
.del .icon{ display: inline-block; width: 20px; height: 25px; margin-right: 5px;
 vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}
           

這樣基本也沒有什麼問題了……

本文為原創文章，轉載請注明出處，謝謝！