對齊文本和背景圖片

Question

請有人可以幫助診斷這個不應該是一個的小問題 - 試圖中心底部對齊文本下面的背景圖片，我已經做了很多次，出於某種原因後不能試圖小時..

它就在這裏頁腳浮動的標誌：http://www.inside-guides.co.uk/brentwood/pages/index.html

正如你可以看到「成員時，是將圖像的左側，正下方。這裏的測試內嵌代碼：

 <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

您可以將量程更改爲一個div：

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

Answer 2

text-align:center什麼都不做的跨度，因爲它的寬度是相同的，因爲它的文字。相反，將該樣式放在外部div上。

Answer 3

這裏是我的版本模式：

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

我加了一些背景顏色，一些邊界和誇張的寬包含徽標的元素以顯示其居中。

（1）可以通過使用用於background-position屬性center價值中心的背景圖像。這是避免必須根據特定徽標的大小來調整容器大小的好方法。

（2）的文本標籤/字幕使用text-align: center;容易中心，但此僅適用於一個塊級元素，因此，定型span元件時使用display: block。

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

當然，正如SpliFF所建議的那樣，您可以在頂部添加一些填充以將文本內聯元素向下移動，然後使用文本對齊。

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