html - 使用 CSS 居中 float 、无宽度的 div

Question

你可以在 http://jsfiddle.net/vW45s/ 看到我要做什么.一个带有两行文本的中心 div，左侧和右侧的文本与中心 div 底部的文本相邻。

我希望文本在页面上居中(主要的“hello world”或第二行)。现在，我正在使用具有指定 width 和 margin: auto 的外部 div。如果宽度过大，文字会显得不居中；如果内部文本的宽度太小，div 将被堆叠:http://jsfiddle.net/vW45s/1/ .

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

如有任何提示，我们将不胜感激。 CSS 不是我的强项，但我正在学习。

Answer 1

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

您有以下选择:

1. 尝试在不指定大小的情况下让它工作。有可能。准备好花一两天时间让它在 Firefox 和 Chrome 上工作，然后花一周时间在 IE 中修复它。 ;)

2. 为所有三个 div 分配一个宽度

3. 使用绝对定位而不是 float 定位。使中心列 100% 宽并将侧列移动到它前面(一个左边 left: 0，另一个右边 right: 0；两者都需要一个一定的宽度)。在您开始过度调整浏览器窗口的大小(并且侧栏开始与中心重叠)之前，这种方法一直有效。

4. 使用 table 或 display: table-cell 因为表格单元格知道它们 sibling 的宽度而不 float 。这意味着您可以为两侧的列分配宽度，然后让内部列增长。

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