我想要做的是有 3 列 div，在页面中央对齐，例如：
示例 （说我不允许发布图片）
我在这里尝试了来自网站/博客/其他问题的各种不同建议，但似乎没有得到任何结果。
首先我尝试将 div 向左浮动，然后给他们的父 div 一个宽度和margin:auto;
那没有用，他们只是留在左边。
我注意到很多建议说停止为此使用 float 并使用display:inline-block;
所以我尝试了，并且在某种程度上它有效，例如：fiddle
但是，一旦我将任何内容添加到任何 div，它们就会停止对齐并跳下页面。
实现这一目标的最简单方法是什么（显然不使用表格）？我确信它不会像我做的那样困难。
干杯。
为此，您需要为要对齐的元素指定宽度，并使用“自动”左右边距。这是兼容标准的方式，适用于除 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>
有一个解决方案可以使宽度未知的浮动居中：http ://www.artlebedev.com/tools/technogrette/html/align-center/
添加vertical-align:top;到您的.box遗嘱中，将盒子排成一行。
要解决为什么添加文本似乎可以解决问题，这是因为
'inline-block' 的基线是它在正常流中的最后一个行框的基线，除非它没有流入行框，或者如果它的 'overflow' 属性具有除 'visible' 之外的计算值，在在这种情况下，基线是底部边距边缘。