Question

I’ve got a div called titlebar. This titlebar has a width of 100%. Inside my titlebar I want to center a title and next to my title I want to display an icon. So the title + icon combo should lay next to each other AND be centered.

This should not be that difficult, but the problem is that I’m using image-sprites, so I can’t use the <img>-tag (I need the icon to be the background of some element).

Anyone got an idea of how to solve this?

This is about as far as I’ve come (no real success):
http://jsfiddle.net/Tw33Y/2/

Answer 1

This is fairly easy to achieve in modern browsers. If this is your HTML:

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

Then use this CSS to style it:

.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;
}

This will not work in IE7 or earlier, you will need to add some hacks if you need them to work.