使用CSS居中浮动、宽度较小的div

Question

你可以看看我在http://jsfiddle.net/vW45s/上想要做什么。包含两行文本的居中div，左右两侧的文本与居中div底部的文本相邻。

我希望文本在页面上居中(无论是主要的"hello world“或第二行)。现在，我正在使用一个具有指定width和margin: auto的外部div。如果宽度太大，文本将不会居中显示；如果宽度对于内部文本来说太小，则div将堆叠：http://jsfiddle.net/vW45s/1/。

有没有更好的方法来居中这三个浮动的div，同时仍然让左右文本与中心div的第二行对齐？

任何建议都将不胜感激。CSS不是我的强项，但我正在学习。

Answer 1

浮动和居中不能很好地混合。为了能够居中，浏览器必须能够确定元素的宽度。要确定它的宽度，它需要知道其他浮动div的宽度。它们的宽度取决于要居中的元素的宽度。

您有以下选项：

1. 尝试在不指定大小的情况下使其工作。这也许是可能的。准备好花一两天的时间让它在Firefox和Chrome上工作，然后用一周的时间在IE中修复它。；)
2. 将宽度分配给所有三个divs
3. Use绝对位置，而不是浮动。使中间列100%宽，并将侧列移动到它前面(一列左侧使用left: 0，另一列右侧使用right: 0；两列都需要一定的宽度)。
4. 使用table或display: table-cell，因为表单元格知道它们的兄弟元素的宽度而不会浮动。这意味着您可以将宽度分配给两侧列，然后让内部列增长。

附言:是的，我知道桌子不好的神话。这个神话是一个粗略的简化。如果你用两个div和一些聪明的CSS就能得到相同的结果，那么为了得到你想要的设计而嵌套500个表是不好的。但这并不意味着您必须完全不使用表。

Answer 2

您是否尝试过将width: 33%与text-align: center一起添加到左侧、右侧和中间的div