css圖片後的文字無法居中怎麼辦

css圖片後的文字無法居中的解決方法：先建立一個HTML範例檔案；然後佈局一張圖片和文字；最後將圖片和文字分別加上樣式為「vertical-align: middle」即可。

本教學操作環境：windows7系統、css3版、thinkpad t480電腦。

推薦：《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;
}

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

說明：

vertical-align 屬性設定元素的垂直對準方式。

vertical-align屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表格單元格中，這個屬性會設定單元格框中的儲存格內容的對齊方式。

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

以上是css圖片後的文字無法居中怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！