在CSS中使动态宽度的内联块居中

Question

所以.. 我有一个动态宽度的页面。下面，包装器div居中其中的div。但是，每个div都有一个样式:

display:inline-block;
width:400px; /* static */

这会使内部div并排显示。但这意味着根据浏览器的宽度以及有多少个div可以并排而不断到下一行，就会留下一些空白。 要了解我的目的，请打开Google Chrome新标签页并拖动浏览器窗口使其变小。您会发现当您走得太远时，一些Chrome应用程序会跳到下一行，但仍保持居中。 在我的情况下，它们会跳到下一行并且不居中。 这是我的代码样式：

<div class="wrapper">
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
</div>

我希望内部的div元素并排显示，除非空间不足，否则最后一个元素将会移到下一行，而所有这些还需保持在父div中居中显示。感谢您的帮助。

- Jacob

Answer 1

如果我理解正确，将text-align:center添加到您的.wrapper样式中应该会产生所需的效果。请参见此处的示例。调整结果面板以观察框的重新排序。

就像Akaishen已经提到的那样，内联块像文本一样流动。这就是为什么您可以使用text-align控制它们的对齐方式。但是，如果您想对布局进行非常精细的控制，则可能会在使用内联块时遇到问题。由于它们像文本一样流动，因此它们之间的空格不会被忽略。不幸的是，在浏览器和操作系统之间无法确定空格的绝对宽度。我的示例中块之间的间隙就是由此引起的。

- raphinesse

---

这正是我想要的！现在这更像是一种hack而不是正确的方法吗？ - Jacob

@jake 这不是黑客攻击，上面有解释。 - raphinesse

我知道这不是黑客行为。我过去曾经使用过它，但我甚至没有想到要使用它。我不应该说“黑客”，我的意思是一定有更好的方法来做这件事。但目前来看，我认为这是最好的方法。 - Jacob

Answer 2

由于您正在使用display: inline-block，因此<div>标签本质上是内联元素，并且可以像内联元素一样进行样式设置。 text-align: center将使每个元素居中。此时，您需要一个容器/包装器来定义最大和最小宽度。

可能有更好的方法来实现您想要的效果，这与Chrome窗口的工作方式不完全相同，但这是一个开始：fiddle

- Akaishen

---

谢谢！我想可能有更好的方法。将来可能会涉及到 CSS3 中的 box-flex。 - Jacob

回答你对raphinesse的问题，这不是一个黑客行为。然而，IE7在非内联元素上没有实现inline-block。<div>标签不是自然的内联元素。在IE7中，你会得到一系列垂直的框。你可以在这里阅读更多相关信息。祝好运！ - Akaishen