我这里有一个工作代码：http://jsfiddle.net/WVm5d/ http://jsfiddle.net/WVm5d/（您可能需要将结果窗口放大才能看到对齐中心效果）
Question
该代码工作正常，但我不喜欢display: table;。这是我使包裹类对齐中心的唯一方法。我认为如果有一种方法可以使用会更好display: block; or 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>
尝试这个。我添加了text-align: center对身体和display:inline-block包裹，然后取出你的display: table
body {
background: #bbb;
text-align: center;
}
.wrap {
background: #aaa;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
