jquery - div中心问题

Question

我有主容器 940 像素

在主容器内有 2 个 div，每个宽度为 250 像素

我希望这些框与主容器居中对齐。但是问题是第二个 div 动态添加。因此，如果第二个 div 不存在，第一个应该居中。并且当添加第二个 div 时，两者都应按 940 px 主 div 居中。

我尝试了很多，但无法找到解决方案。请帮忙！

这是简化的代码

CSS

   div.box {
    background: #EEE;
    height: 400px;
    width: 940px;
}
div.left {
    background: #999;
    float: left;
    height: 390px;
    width: 250px;
}
div.right {
    background: #666;
    height: 390px;
    width: 250px;
    float: left;
}
div.clear {
    clear: both;
}

HTML

 <div class="box">

       <div class="left">Tree</div>
       <div class="right">View</div> ( this div will dynamically add)
       <div class="clear" />

    </div>

谢谢

Answer 1

只需添加margin:auto;到您的div.box，它就会出现在中心

JS 小提琴演示

已编辑： 这里隐藏了第二个 div（“.right”）并且工作正常

2nd Demo现在按下Ctrl（-减号）看到它的中心

Answer 2

div.box在你的CSS中试试这个

 margin:0px auto;

对于演示 chk this out JSFIDDLE DEMO

Answer 3

make this remove clear:both; class

http://jsfiddle.net/jWVxd/4/

CSS

  div.box {
    width: 940px;
    background: #EEE;
    height: 400px;
    display: table;
    padding:10px;
}
div.left {
    background: #999;
    display: table-cell;
    width: 250px;
}
div.right {
    background: #666;
    display: table-cell;
    width: 250px;
}