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中居中。

感谢您的帮助。

Answer 1

如果我理解您正确地将text-align: center添加到.wrapper样式中，则应该达到预期的效果。有关示例，请参阅this fiddle。调整结果面板的大小以观察框的重新排序。

就像Akaishen已经提到过的内联块流一样。这就是为什么你可以控制它们与text-align的对齐。但是，如果您希望对布局进行非常精细的控制，则可能会遇到使用内联块的问题。因为它们像文本一样流动，所以它们之间的空格不会被忽略。遗憾的是，您无法确定跨浏览器和操作系统的空间的绝对宽度。我的例子中的块之间的差距是由此引起的。

Answer 2

当您使用display: inline-block时，<div>标记基本上是内联元素，可以这样设置样式。 text-align: center会使每个元素居中。此时，您需要一个容器/包装器来定义最大和最小宽度。

可能有更好的方法来实现您的目标，这与Chrome窗口的工作原理不完全相同，尽管这是一个开始：fiddle

CSS中具有动态宽度的居中内联块

2 个答案: