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; 
}