div中的中心div

Question

試圖在div中居中幾個div。似乎無法得到它的工作。任何接受者？

結果應該是中間的所有三個div，相隔50 px。

JsFiddle

<div class="centerDivs"> 
    <div style="margin-right:50px;float:left;"> 
    <div>Testing</div>  
    <div>1,000,000 php</div> 
    </div> 
    <div style="margin-right:50px;float:left;"> 
    <div>Testing</div>  
    <div>1,000,000 php</div> 
    </div> 
    <div style="margin-right:50px;float:left;"> 
    <div>Testing</div>  
    <div>1,000,000 php</div> 
    </div> 
</div> 

Answer 1

你可以做t他：

CSS

.centerDivs { 
    display: block; 
    text-align: center; 
} 

.item { 
    display: inline-block; 
    padding: 0px 25px; 
} 

HTML

<div class="centerDivs"> 
    <div class="item"> 
    <div>Testing</div> 
    <div>1,000,000 php</div> 
    </div> 
    <div class="item"> 
    <div>Testing</div> 
    <div>1,000,000 php</div> 
    </div> 
    <div class="item"> 
    <div>Testing</div> 
    <div>1,000,000 php</div> 
    </div> 
</div> 

DEMO HERE

Answer 2

如果使用浮動，你不能真正中心您的div。刪除浮動屬性。

你可以嘗試使用柔性，例如：

.centerDivs{ 
    display: flex; 
    justify-content: center: 
} 

希望對大家有所幫助

Answer 3

變換的inline-block元素和text-align: center箱子父：

https://jsfiddle.net/fmtnbj8z/5/

.centerDivs { 
    text-align:center; 
} 
.centerDivs div { 
    display:inline-block; 
    text-align:left; 
}