Question

尝试将div中的几个div居中。似乎无法让它发挥作用。任何人？

结果应该是中间的所有三个div，相隔50 px。

<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

如果你使用浮动，你不能真正集中你的div。删除浮动属性。

您可以尝试使用flex，例如：

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

希望它会有所帮助

Answer 2

将inline-block元素和text-align: center中的框转换为父级：

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

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

Answer 3

你可以这样做：

<强> 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

div中心div

3 个答案: