2

您可以在http://jsfiddle.net/vW45s/看到我的目标。具有两行文本的中心 div，以及与中心 div 底部的文本相邻的左右文本。

我希望文本以页面为中心（主要的“hello world”或第二行）。现在我正在使用带有指定widthand的外部 div margin: auto。如果宽度过大，文字不会显得居中；如果内部文本的宽度太小，则会堆叠 div：http: //jsfiddle.net/vW45s/1/。

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

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

4

2 回答 2

2

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

您有以下选择：

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

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

  3. 使用绝对定位而不是浮动。将中心列设为 100% 宽，然后将侧列移动到它前面（一个左边用left: 0，另一个右边用right: 0；两者都需要一个确定的宽度）。这一直有效，直到您开始过多地调整浏览器窗口的大小（并且侧栏开始与中心重叠）。

  4. 使用tableordisplay: table-cell因为表格单元格知道它们的兄弟姐妹的宽度而不会浮动。这意味着您可以为两侧列分配宽度，然后让内列增长。

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

于 2012-06-19T19:37:00.753 回答
0

您是否尝试过将 div 添加width: 33%到左侧、右侧和中心 div 中text-align: center？

于 2012-06-19T19:07:30.673 回答