保证金0自动在我的情况下不起作用

Question

以下是我的代码的一部分：jsfiddle

我试图找到一个解决方案，将.person div放在.team div的中心。

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

即使页面宽度发生变化，是否可以使.person div保持居中？在我的情况下，我有一个静态width: 768px，但即便如此，我也无法将div放在中心位置。

Answer 1

将人员课程设为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 example here。