html - 如何在 100% 宽度包装器内居中 float 、多行 div？

Question

我有不同宽度的瓷砖列表。它们都位于自动宽度的 .projects 中，并被另一个宽度为 100% 的 div (.wrapper) 包裹。

<div class="wrapper">
    <div class="projects">
        <div class="pro p1"></div>
        <div class="pro p2"></div>
        <div class="pro p4"></div>
        <div class="pro p2"></div>
    </div>
</div>

我想让 .projects block 居中，但是 .pro 应该向左浮动，因为我想让图 block 左对齐，所以我不能使用 display: inline-block; 用于 .pro 元素。

如果元素的数量可以放在一行中，它会完美地工作 -> .projects 宽度等于所有 .pro 容器内的宽度之和(第一个和Fiddle 中的第二个示例)。

但是如果元素数量较多，它们会转到另一行，.projects 容器变为 100% 宽度而不是内部元素的实际最大宽度。

如果子元素不适合一行而不是上一个示例的效果，是否有可能实现 .projects 的宽度不是 100%？

查看代码:http://jsfiddle.net/68U47/2/

Answer 1

.元素{ 宽度:600px； margin : 0 auto ； } [类^ =“亲”] { 显示:内联 block ； 宽度:20%； 向左飘浮;

像这样应该可以做到，基本上元素上的 margin 0 auto 会在屏幕上居中显示。