将一个div与居中的2个div对齐

Question

目前，我正在尝试获取2个div以使其居中对齐，但还不确定如何做到这一点。 默认情况下，它们转到左侧。

我有margin-left：14％，它将在中心对齐一些，但是当您调整窗口大小时，它看起来很奇怪，因为它与右侧对齐。

与marign-left / right：auto一起尝试过，但没有结果。

html

<div id="panels">

<div id="panel-left">           
</div>

<div id="panel-right">  
</div>

的CSS

 #panels{ padding-top:15px; margin-left: auto; margin-right: auto; } #panel-left{ width:32%; min-width:209px; overflow:hidden; background-color:white; float:left; padding-left:25px; height:473px; } #panel-right{ width:32%; min-width:209px; height:473px; background-color:white; float:left; padding-left:25px; } 

Answer 1

尝试这个：

的CSS

#panels{
    padding-top:15px;
    text-align:center;
    display: block;
}

#panel-left{
    width:32%;
    min-width:209px;
    overflow:hidden;
    background-color:black;
    height:473px;
    display: inline-block;
}

#panel-right{
    width:32%;
    min-width:209px;
    height:473px;
    background-color:orange;
    display: inline-block;
}

此处演示

Answer 2

尝试这种样式，我使用了框大小的css属性来照顾内联样式化过程中固有的1px空间。

在这里摆弄

当然，您的初始代码中有一个未关闭的div元素，现已修复。

所以CSS看起来像

#panels {
    padding-top:15px;
    margin: 0 auto;
    background: cyan;
    width:50%; /* u need this */
    height:500px;
}
#panel-left {
    width:50%;
    box-sizing:border-box;
   /* min-width:209px;   By doing this you are pretty much giving the width to be 100 % */
    overflow:hidden;
    background-color:gray;
    float:left;
    padding-left:25px;
    height:473px;
    border:1px solid #000;
}
#panel-right {
    width:50%;
    box-sizing:border-box;
    /*min-width:209px;*/
    height:473px;
    background-color:white;
    float:left;
    padding-left:25px;
    border:1px solid #000;
}

程式码片段：：

 #panels { padding-top: 15px; margin: 0 auto; background: cyan; width: 50%; /* u need this */ height: 500px; } #panel-left { width: 50%; box-sizing: border-box; /* min-width:209px; By doing this you are pretty much giving the width to be 100 % */ overflow: hidden; background-color: gray; float: left; padding-left: 25px; height: 473px; border: 1px solid #000; } #panel-right { width: 50%; box-sizing: border-box; /*min-width:209px;*/ height: 473px; background-color: white; float: left; padding-left: 25px; border: 1px solid #000; } 

 <div id="panels"> <div id="panel-left">left</div> <div id="panel-right">right</div> </div> 

希望这可以帮助。 快乐编码:)