這篇文章主要介紹html中如何解決圖片與文字垂直方向不對齊問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

網站建設哪家好，找成都創新互聯公司！專注于網頁設計、網站建設、微信開發、微信小程序定制開發、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了牧野免費建站歡迎大家使用！

比如說，現在我要做一個簡單的刪除按鈕，只由一個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;}

這樣基本也沒有什么問題了

以上是“html中如何解決圖片與文字垂直方向不對齊問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

分享文章：html中如何解決圖片與文字垂直方向不對齊問題-創新互聯
轉載注明：http://www.2m8n56k.cn/article34/dehese.html

成都網站建設公司_創新互聯，為您提供面包屑導航、靜態網站、網站改版、定制網站、網站收錄、響應式網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯