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

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了牧野免費(fèi)建站歡迎大家使用！

比如說(shuō)，現(xiàn)在我要做一個(gè)簡(jiǎn)單的刪除按鈕，只由一個(gè)icon和“刪除”兩個(gè)字組成，你會(huì)如何布局，給你30秒時(shí)間考慮。

好，先亮出HTML代碼如下：

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

很簡(jiǎn)單，就是一個(gè)class為del的div元素下有兩個(gè)span標(biāo)簽，當(dāng)然icon你也可以直接用偽元素代替（還不知道偽元素的面壁思過(guò)去...）。

接下來(lái)你可能會(huì)這么寫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%;}

然后它就變成這個(gè)樣子了：

咦？好像跟想象的不太一樣啊！為什么圖片和文字垂直方向上不能對(duì)齊呢？Why?

這是因?yàn)閳D片和文字在行內(nèi)垂直方向默認(rèn)是以基線（baseline）對(duì)齊的，圖片基線在圖片底部，而文字基線卻在文字中點(diǎn)偏下的位置，所以才會(huì)顯示成上圖的樣子。那么這個(gè)問題該如何解決呢？

很簡(jiǎn)單，我們只需給圖片和文字分別加上 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;}

這樣的話，圖片和文字就以其中心線對(duì)齊了：

說(shuō)到這里，其實(shí)本文基本已經(jīng)結(jié)束了，但是經(jīng)過(guò)本人親測(cè)發(fā)現(xiàn)，在移動(dòng)端卻會(huì)發(fā)現(xiàn)圖片和文字又會(huì)出現(xiàn)不對(duì)齊的情況了，但這只是部分瀏覽器出現(xiàn)的兼容性問題，解決方法也是有的，就是在設(shè)置文字字體大小和icon大小時(shí)盡量設(shè)置為5的整數(shù)倍，并盡量讓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中如何解決圖片與文字垂直方向不對(duì)齊問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：html中如何解決圖片與文字垂直方向不對(duì)齊問題-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://jinyejixie.com/article34/dehese.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、靜態(tài)網(wǎng)站、網(wǎng)站改版、定制網(wǎng)站、網(wǎng)站收錄、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)