將一個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> 

希望這可以幫助。 快樂編碼:)