对齐文字和背景图片

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。

当页面上有一系列徽标（例如，赞助者页面）时，我倾向于使用这种模式。