如何将div中的元素居中？

Question

我在主div中有一些div,但是我已经看过类似的每个问题了,我尝试了很多东西,但我不能将它们水平居中.我只能把它们放在另一边而不是中心.

.ground {
  width: 390px;
  height: 575px;
  border: 1px solid white;
}

.line {
  padding: 10px
}

.active {
  width: 30px;
  height: 30px;
  opacity: 0.5;
  background: gray;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 100px;  
  display: inline-block;
  border: 2px solid black;
}

.nonactive {
  width: 30px;
  height: 30px;
  opacity: 1.0;
  background: lime;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 100px;  
  display: inline-block;
  border: 2px solid black;
}

这是jsfiddle演示

你可以看到那5个圆圈是我需要将它们放在主div区域内的圆圈.

Answer 1

在您的情况下,最简单的方法display是将.line元素设置为inline-block使其具有"缩小到适合"的宽度.这样做,它将具有与其子元素相同的宽度.然后添加text-align: center到父元素以使内联子元素居中:

更新的示例

.ground {
  text-align: center;
}
.ground .line {
  display: inline-block;
}

有关其他选择,请参阅此答案.