2

我想要做的是有 3 列 div，在页面中央对齐，例如：

示例 （说我不允许发布图片）

我在这里尝试了来自网站/博客/其他问题的各种不同建议，但似乎没有得到任何结果。

首先我尝试将 div 向左浮动，然后给他们的父 div 一个宽度和margin:auto;

那没有用，他们只是留在左边。

我注意到很多建议说停止为此使用 float 并使用display:inline-block;

所以我尝试了，并且在某种程度上它有效，例如：fiddle

但是，一旦我将任何内容添加到任何 div，它们就会停止对齐并跳下页面。

实现这一目标的最简单方法是什么（显然不使用表格）？我确信它不会像我做的那样困难。

干杯。

4

3 回答 3

0

为此，您需要为要对齐的元素指定宽度，并使用“自动”左右边距。这是兼容标准的方式，适用于除 IE5.x 之外的任何地方。

<div style="width: 50%; margin: 0 auto;">Hello</div>

要在 IE6 中使用此功能，您需要使用合适的 DOCTYPE确保打开标准模式。

如果你真的需要支持 IE5/Quirks 模式，而现在你不应该这样做，可以结合两种不同的居中方法：

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
于 2012-11-05T14:16:41.360 回答
0

有一个解决方案可以使宽度未知的浮动居中：http ://www.artlebedev.com/tools/technogrette/html/align-center/

于 2012-11-05T14:27:03.443 回答
0

添加vertical-align:top;到您的.box遗嘱中，将盒子排成一行。

要解决为什么添加文本似乎可以解决问题，这是因为

'inline-block' 的基线是它在正常流中的最后一个行框的基线，除非它没有流入行框，或者如果它的 'overflow' 属性具有除 'visible' 之外的计算值，在在这种情况下，基线是底部边距边缘。

来自CSS2 视觉格式化模型细节。

相关问题为什么这个 inline-block 元素会被向下推？

于 2012-11-05T14:34:11.427 回答