中心對齊多個孩子DIV

Question

我發現有點混亂解決這個問題。

我有父DIV和3 /多個孩子DIV。

父DIV居中對齊，子DIV應該左移但應該對齊中心。

CSS含有

.center { 
    float:left; 
    height:250px; 
    width:15%; 
    margin: 0 auto; 
    border: 1px solid black; 
} 

I have a sample of the code link here...

Answer 1

如果你想水平對齊你的元素集中，那麼不要浮動它們。

更改它們顯示到inline-block的方式，通過改變text-align風格其父的對齊它們在中心：

#parent { 
 
    text-align:center; 
 
    height:450px; 
 
    width:75%; 
 
    border:1px solid blue; 
 
} 
 
.center { 
 
    display:inline-block; 
 
    height:250px; 
 
    width:15%; 
 
    margin: 0 auto; 
 
    border: 1px solid black; 
 
}

<div id="parent"> 
 
    <div id="child1" class="center"></div><!-- 
 
--><div id="child2" class="center"></div><!-- 
 
--><div id="child3" class="center"></div> 
 
</div>

確保沒有空格或換行符在你的孩子之間<div> s（在你的HTML中），或者註釋掉它。現在這些是內聯元素，這個空格將被解釋​​爲一個空格。

Answer 2

自動利潤率將不適用於具有施加一個浮動的元件。刪除浮動應該讓你開始...