Question

我有一个叫做标题栏的div。此标题栏的宽度为100％。在我的标题栏中，我想以标题为中心，在我的标题旁边，我想显示一个图标。因此标题+图标组合应该彼此相邻并且居中。

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

任何人都知道如何解决这个问题？

这就是我来的（没有真正的成功）： 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或更早版本中无效，如果您需要它们，您需要添加一些黑客。

中心图像和文字

1 个答案: