中心图像和文字

Question

我有一个称为标题栏的div。 该标题栏的宽度为100％。 在标题栏中，我想将标题居中，并在标题旁边显示一个图标。 因此，标题+图标组合应该并排放置并居中。

这应该没有那么困难，但是问题是我使用的是图像精灵，所以我不能使用<img> -tag（我需要图标作为某些元素的背景）。

有人知道如何解决这个问题吗？

这是关于我的来信（没有真正的成功）： http : //jsfiddle.net/Tw33Y/2/

Answer 1

在现代浏览器中，这相当容易实现。 如果这是您的HTML：

<div class="titlebar">
    <div class="title-sprite"></div>
    Title Text
</div>

然后使用此CSS对其进行样式设置：

.titlebar {
    text-align: center;
}

.title-sprite {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(http://www.alistapart.com/d/sprites/sprites.gif) -36px -24px no-repeat;
}

这在IE7或更早版本中将不起作用，如果需要它们，则需要添加一些技巧。