css圖片后的文字無法居中如何解決
這篇文章主要介紹css圖片后的文字無法居中如何解決，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
成都創(chuàng)新互聯(lián)是一家專業(yè)提供渦陽企業(yè)網站建設,專注與網站設計制作、網站設計、HTML5建站、小程序制作等業(yè)務。10年已為渦陽眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網站制作公司優(yōu)惠進行中。
css圖片后的文字無法居中的解決辦法：首先創(chuàng)建一個HTML示例文件；然后布局一張圖片和文字；最后給圖片和文字分別加上樣式為“vertical-align: middle”即可。
css圖片后的文字無法居中?
比如說，現(xiàn)在我要做一個簡單的刪除按鈕，只由一個icon和“刪除”兩個字組成，你會如何布局，給你30秒時間考慮。
好，先亮出HTML代碼如下：
刪除
很簡單，就是一個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;
}這樣的話，圖片和文字就以其中心線對齊了：
說明：
vertical-align 屬性設置元素的垂直對齊方式。
vertical-align屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。
使用vertical-align:middle 可以把元素放置在父元素的中部。
以上是“css圖片后的文字無法居中如何解決”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當前名稱：css圖片后的文字無法居中如何解決
本文網址：
http://weahome.cn/article/pjjiec.html
重慶分公司
重慶分公司
