css圖片后的文字無法居中如何解決

這篇文章主要介紹css圖片后的文字無法居中如何解決，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)是一家專業(yè)提供渦陽企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、HTML5建站、小程序制作等業(yè)務(wù)。10年已為渦陽眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

css圖片后的文字無法居中的解決辦法：首先創(chuàng)建一個(gè)HTML示例文件；然后布局一張圖片和文字；最后給圖片和文字分別加上樣式為“vertical-align: middle”即可。

css圖片后的文字無法居中?

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

好，先亮出HTML代碼如下：

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

很簡單，就是一個(gè)class為del的div元素下有兩個(gè)span標(biāo)簽，當(dāng)然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%;
}

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

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

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

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

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

說明：

vertical-align 屬性設(shè)置元素的垂直對齊方式。

vertical-align屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負(fù)長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個(gè)屬性會設(shè)置單元格框中的單元格內(nèi)容的對齊方式。

使用vertical-align:middle 可以把元素放置在父元素的中部。

以上是“css圖片后的文字無法居中如何解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章標(biāo)題：css圖片后的文字無法居中如何解決
鏈接地址：http://muchs.cn/article42/pjjiec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、關(guān)鍵詞優(yōu)化、云服務(wù)器、動態(tài)網(wǎng)站、App開發(fā)、網(wǎng)站制作

廣告

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