css - 与层次结构中包含的中心 div 元素对齐

Question

我的一个网页中有以下结构:

<div class="id1">
        <div class="wrapper">
                    <div class="id2 block">
                    </div>
                    <div class="id3 block">
                    </div>
        </div>
</div>

我想让 div 元素 id2 和 id3 居中。我尝试使用带有 align=center 的 div 元素，但到目前为止它只将 id2 和 id3 中的文本居中，而不是元素 id2 和 id3。

Answer 1

你可以这样做:

使用 margin: 1em auto;

1em 是顶部margin，auto 计算侧边距并同样适用。

注意:必须在 div 上设置一个 width 才能工作。

div.wrapper{border:1px solid green; width:400px; height:400px;}
div.id2, div.id3 {border:1px solid red; width:200px; height:100px; 
                  margin:1em auto;}

边框和内容仅作为示例:

http://jsfiddle.net/jasongennaro/DgZza/