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

Question

所以..我有一个动态宽度页面.下面,包装器div将div内部居中.但是,每个div都有以下样式:

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

这使得内部div并排.但这意味着根据浏览器的宽度剩下一些空白,并且可以并排多少div而不会破坏下一行.

要了解我的目标,请打开Goog​​le 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风格应该给出所需的效果.看一下这个小提琴的例子.调整结果面板的大小以观察盒子的重新排序.

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