Left，Right和Center Align Div div下的子div div

Question

我想根據其父類的左邊，右邊或中心對齊父級Div下的子Div。

我也做了以下

.container{ 
 
    border:1px solid; 
 
    padding:1px; 
 
    width:100%; 
 
    margin:1px; 
 
} 
 

 
.left-item{ 
 
    float:left; 
 
    padding:auto; 
 
    margin:1px; 
 
} 
 

 
.center-item{ 
 
    padding:auto; 
 
    margin:1px; 
 
} 
 

 
.right-item{ 
 
float:right; 
 
padding:auto; 
 
    margin:1px; 
 
}

<div class="container">   
 
    <button class="left-item">Left</button> <button class="center-item">Center 2</button> <button class="right-item">Right</button> <button class="left-item">Left</button> <button class="right-item">Right</button> <button class="center-item">Center 1</button> <button class="center-item">Center 3</button>   
 
</div>

我無法對齊child Divs居中於母公司Divs。誰能幫我這個？

Answer 1

只要給的text-align：center屬性來div容器。 JS小提琴 - https://jsfiddle.net/72aqsq83/1/

.container{ 
    border:1px solid; 
    padding:1px; 
    width:100%; 
    margin:1px; 
    text-align:center 
} 

Answer 2

我認爲你應該使用CSS flexboxes屬性。
這可能會解決你的問題：

.container { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: space-around; 
} 

要了解更多關於Flexbox的特性，這裏有一些鏈接，我建議：
MDN - Using CSS flexible boxes
MDN - flex-flow
MDN - justify-content

的CSS靈活盒是易於使用和完全支持：
CanIUse - "flexbox"

Answer 3

將盒子分成左，中，右的簡單方法是使用CSS flexbox。通過在新的div中包裝左側，中間和右側，並將您的容器轉換爲帶有display:flex的Flexbox，您可以用更少的代碼來模擬此行爲。

.container { 
 
    border: 1px solid; 
 
    padding: 1px; 
 
    width: 100%; 
 
    margin: 1px; 
 
    display:flex; 
 
    justify-content:space-between; 
 
}

<div class="container"> 
 
    <div> 
 
    <button>Left</button> 
 
    <button>Left</button> 
 
    </div> 
 
    <div> 
 
    <button>Center 2</button> 
 
    <button>Center 1</button> 
 
    <button>Center 3</button> 
 
    </div> 
 
    <div> 
 
    <button>Right</button> 
 
    <button>Right</button> 
 
    </div> 
 
</div>