html - Margin 0 auto 在我的情况下不起作用

Question

这是我的代码的一部分：jsfiddle

我试图找到一种解决方案，将.persondiv 置于 div 内部.team。

我花了大约一个小时来弄清楚我做错了什么，但没有成功。

.person即使页面宽度发生变化，是否可以使div 保持居中？就我而言，我有一个 static width: 768px，但即使如此，我也无法将 div 居中。

Answer 1

通过将 person 类设置为display:inline-block而不是float:left.
然后，您可以申请text-align:center团队课程。
这应该达到预期的结果。

.team {
    text-align: center;
    border: 1px solid green;
    overflow: hidden;
    width: 768px;
    margin: 0 auto;
    margin-top: 30px;
}

.person {
    border:1px solid red;
    text-align:left;
    width: 200px;
    display: inline-block;

    &:nth-child(5n+1) {
        margin-left: 0px;
    }

我更改边框颜色仅用于测试目的。

在这里小提琴 - http://jsfiddle.net/sZNJG/7/

Answer 2

尝试添加text-align: center;类team。请参阅此处的 jsfiddle 示例。