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;即可。这将适用于您的.person div，因为您将其设置为display: inline-block;

在这里查看text-align: center;的结果，看看它是否适合您：http://jsfiddle.net/Chs9X/

将父div与已离开对齐子项的响应式页面的中心对齐

1 个答案: