Yet another problem with CSS horizontal centering

I know about margin auto. However, it does not work for me here.

I'm trying to center a (possibly long) line of text over a (relatively narrow) image. If the text is longer than the image, it should spill out of the resulting box on either end, so the whole complex is only as wide as the image.

The markup is something like this:

<div class="bb">
    <a href="blahblah">
        <b>CaptionAbove</b>
        <img src="blah.png"/>
</a>
    <b>below</b>
</div>

.bb is an inline-block so these bb's pop together horizontally in a row. CaptionAbove may be longer than the img is wide, but should not make the 开发者_如何学Goneighbors spread out! elements a and b are display:block, so everything inside here stacks up vertically.

If I give the <b> a specified width like 1em so it doesn't grow to surround the text, then the overflow of the text is on the right only, and the artificial box is flush left within the enclosing <a> block.

I like the markup grouping the img and the caption together, and a table would not only lose that but the mouse-over effects knowing that the vertical stack is all one item.

Any suggestions welcome.

How's about something like this?

http://jsfiddle.net/UvbQJ/1/