css - 将父 div 对齐到具有左对齐子元素的响应页面的中心

Question

我有一个包含此部分的响应页面：

<div id="team">
    <div class="person">
        <div class="photo"></div> 
        <div class="title"></div> 
    </div>
    <div class="person">
        <div class="photo"></div> 
        <div class="title"></div> 
    </div>
    <div class="person">
        <div class="photo"></div> 
        <div class="title"></div> 
    </div>
    <div class="person">
        <div class="photo"></div> 
        <div class="title"></div> 
    </div>
    <div class="person">
        <div class="photo"></div> 
        <div class="title"></div> 
    </div>
</div> 


#team {
    width: 100%;
    margin: 0 auto;
}
#team .person { 
    display: inline-block;
    text-align: left;
    cursor: default;
    margin: 0 3em;
}

team有 100% 的宽度。我需要对齐team到页面的中心取决于页面宽度。但是孩子person应该在team. 所以当我们有一些person没有填满一行时，它应该向左对齐。你能帮忙吗？

Answer 1

margin: 0 auto;真的只适用于固定宽度的元素。您不能期望设置为 100% 宽度的 div 以它为中心。

如果您想将 的内容居中#team，您可以简单地应用text-align: center;。这将适用于您的.persondiv，因为您将它们设置为display: inline-block;

看看text-align: center;这里的结果，看看它是否是你要找的：http: //jsfiddle.net/Chs9X/