Aligning text and background image

Question

Please could someone help diagnose this tiny problem that shouldn't be one - trying to center-bottom align text below a background image which I've done many times, for some reason can't after hours of trying..

It's the logos floated right in the footer here: http://www.inside-guides.co.uk/brentwood/pages/index.html

As you can see 'Member Of' is to the left of the image, just below. here's the inline code for testing:

     <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 does nothing on the span because its width is the same as it's text. put that style on the outer div instead.

Answer 2

您可以将跨度更改为div：

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

Answer 3

Here is my version of this pattern:

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

I added some background colors, some borders and exaggerated the width of the element containing the logo so as to show that it is centered.

(1) You can center the background image by using the center value for the background-position property. This is good trick to avoid having to size your container to match the size of the particular logo.

(2) The text label/caption is easily centered using text-align: center; but this works only on a block level element, hence, use display: block when styling the span element.

(3) Inherit the width of the span from the logo's parent container, you need to specify a width.

Of course, as suggested by SpliFF, you could add some padding to the top to move the text inline element down, and then use text-align.

I tend to use this pattern when I have a series of logos on a page, for example, a sponsors page.