css - CSS 水平居中的另一个问题

Question

我知道 margin 自动。但是，它在这里对我不起作用。

我试图将一行(可能很长)的文本置于(相对较窄的)图像上。如果文本比图像长，它应该从两端的结果框中溢出，因此整个复合体仅与图像一样宽。

标记是这样的:

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

.bb 是一个内联 block ，因此这些 bb 水平排列在一起。 CaptionAbove 可能长于 img 的宽度，但不应该让邻居散开!元素 a 和 b 是 display:block，因此这里的所有内容都垂直堆叠。

如果我给 一个指定的宽度，比如 1em，这样它就不会增长到包围文本，那么文本的溢出仅在右侧，而人工框在封闭的 阻止。

我喜欢将 img 和标题组合在一起的标记，表格不仅会丢失它，而且知道垂直堆栈都是一个元素的鼠标悬停效果。

欢迎提出任何建议。

Answer 1

这样的东西怎么样？

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