你可以在 http://jsfiddle.net/vW45s/ 看到我想要的内容。 。一个中心 div，有两行文本，左侧和右侧的文本与中心 div 底部的文本相邻。
我希望文本位于页面中央(主要的“hello world”或第二行)。现在我正在使用具有指定 width 和 margin: auto 的外部 div。如果宽度太大，文字会显得不居中；如果宽度对于内部文本来说太小，则 div 将堆叠:http://jsfiddle.net/vW45s/1/ .
是否有更好的方法将这三个 float div 居中，同时仍然使左右文本与中心 div 的第二行对齐？
如有任何提示，我们将不胜感激。 CSS 不是我的强项，但我正在学习。
最佳答案
float 和居中不能很好地结合起来。为了能够将某些内容居中，浏览器必须能够确定元素的宽度。为了确定它的宽度，它需要知道其他 float div 的宽度。它们的宽度取决于您想要居中的元素的宽度。
您有以下选择:
尝试在不指定大小的情况下使其正常工作。也许有可能。准备好花一两天的时间来让它在 Firefox 和 Chrome 上运行，然后花一周的时间在 IE 中修复它。 ;)
为所有三个
div分配宽度使用绝对定位而不是 float 定位。将中心列设置为 100% 宽，并将侧列移到其前面(一个向左使用
left: 0，另一个使用right: 0向右；两者都需要确定宽度)。直到您开始将浏览器窗口的大小调整得太多(并且侧栏开始与中心重叠)为止，这种方法都有效。使用
table或display: table-cell，因为表格单元格知道其同级单元格的宽度而无需 float 。这意味着您可以为两侧的列分配宽度，然后让内列增长。
PS:是的，我知道 table 不好的神话。这个神话是一种粗略的简化。如果您可以使用两个 div 和一些智能 CSS 获得相同的结果，那么嵌套 500 个表格来获得您想要的设计是很糟糕的。但这并不意味着您根本不能使用表格。
关于html - 使用 CSS 将 float 、无宽度的 div 居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11095004/