CSS中心显示内联 block ？

Question

我这里有一个工作代码:http://jsfiddle.net/WVm5d/ (您可能需要将结果窗口变大才能看到居中对齐效果)

问题

代码工作正常，但我不喜欢display: table;。这是我可以使包装类对齐中心的唯一方法。我认为如果有一种方法可以使用 display: block; 或 display: inline-block; 会更好。是否可以通过其他方式解决对齐中心问题？

向容器添加固定 with 不是我的选择。

如果以后 JS Fiddle 链接被破坏，我也会将我的代码粘贴到这里:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

Answer 1

试试这个。我添加了 text-align: center 到 body 和 display:inline-block 换行，然后删除了你的 display: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}