使用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

浮动和居中混合不好。为了能够集中某些东西，浏览器必须能够确定元素的宽度。为了确定它的宽度，它需要知道其他浮动的宽度是多少。它们的宽度取决于要居中的元素的宽度。

您有以下选择：

1. 设法得到它，而无需指定大小的工作。这可能是可能的。准备好花一两天时间，让它在Firefox和Chrome上运行，然后再用一个星期的时间在IE中修复它。 ）

2. 分配宽度的所有三个div小号

3. 使用绝对定位，而不是浮置的。使中心列100％宽，并移动它的前面的列（一个留下left: 0，另一个右边right: 0;两者都需要一个确定的宽度）。直到您开始调整浏览器窗口的大小（并且边栏开始与中心重叠），这种方式才起作用。

4. 使用table或display: table-cell因为表格单元格了解他们的兄弟姐妹宽度不浮动。这意味着您可以将宽度分配给两个侧栏，然后让内栏增长。注：

PS：是的，我知道桌子坏的神话。神话是一种粗略的简化。如果您可以通过两个div和一些智能CSS获得相同的结果，那么嵌套500个表以获得您想要的设计是不好的。但这并不意味着你一定不能使用表格。

Answer 2

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