用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. 为所有三个div

分配宽度

3. 使用绝对定位而不是浮动。使中心柱100％宽并移动前面的侧柱（一个留下left: 0，另一个留下right: 0;两个都需要一定的宽度）。这有效，直到您开始过多地调整浏览器窗口的大小（并且侧列开始与中心重叠）。

4. 使用table或display: table-cell因为表格单元格知道其兄弟姐妹的宽度而不浮动。这意味着您可以为两个侧列指定宽度，然后让内部列增长。

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

Answer 2

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