与层次结构中包含的中心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

使用这个CSS：

margin: auto;

这是一种水平居中的技术。

还有一些建议：

1. 避免通过align='center'
等HTML属性创建样式
2. id2和id3是div元素的唯一标识符。将它们移动到id属性，而不是将它们用作类。类只是意味着对多个元素进行分组。

Answer 2

你可以这样做：

使用margin: 1em auto;

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

注意：必须在width上设置div才能生效。

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/