對齊文字和背景圖片

Question

請有人幫助診斷這個不應該是的小問題-嘗試使文本在背景圖像下方居中對齊，這是我已經做過很多次的嘗試了，由於某種原因，經過數小時的嘗試后還是無法解決。

徽標浮在此處的頁腳中： http : //www.inside-guides.co.uk/brentwood/pages/index.html

如您所見，“ Member Of”位於圖像的左側，正下方。 這是用於測試的內聯代碼：

     <div style="margin-right:15px;position:relative;float:right;width:88px;height:100px;background:url(/images/Structure/chamber-logo.png) no-repeat;background-position:50% 0"><span style="font-size:12px;position:absolute;bottom:0;margin:0 auto;text-align:center;">Member Of</span></div>

Answer 1

text-align:center在跨度上不執行任何操作，因為其寬度與文本相同。 將該樣式放在外部div上。

Answer 2

您可以將跨度更改為div：

<div style="font-size:12px; position:absolute;bottom:0; width:100%; text-align: center;">Member Of</div></div>

Answer 3

這是此模式的我的版本：

http://jsfiddle.net/audetwebdesign/svXkt/

我添加了一些背景顏色，一些邊框，並誇大了包含徽標的元素的寬度，以表明其居中。

（1）您可以通過使用background-position屬性的center值來使background-position圖像center 。 這是一個好技巧，可以避免必須調整容器大小以匹配特定徽標的大小。

（2）使用text-align: center;可以輕松地使文本標簽/標題居中text-align: center; 但這僅適用於塊級元素，因此，在對span元素進行樣式設置時，請使用display: block 。

（3）從徽標的父容器Inherit跨度的寬度，您需要指定一個寬度。

當然，如SpliFF所建議，您可以在頂部添加一些填充以將文本內聯元素向下移動，然后使用text-align。

當頁面上有一系列徽標（例如，贊助者頁面）時，我傾向於使用這種模式。