Css 以一排div为中心

我在做一件相对容易的事情时遇到了一些困难，但无论我怎么做，我都无法让我的主管坐在一个区域的中央

所以这里是

<section>

<div style="width: 100%; margin: 0 auto; float: left; text-align:center;">

<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>
<div style="float: left;"><span class="circle">test</span></div>

</div>

</section>


.circle {
    border-radius: 200%;
    width: 500px;
    height: 500px;
    background-color: #3B5163;
    padding: 50px;
    margin: 0 40px 0 40px;
}

测试
测试
测试
测试
测试
.圆圈{
边界半径：200%；
宽度：500px；
高度：500px；
背景色：#3B5163；
填充：50px；
利润率：0.40px 0.40px；
}

所以我需要它们被分开，留有均匀的边距，当屏幕缩小时，它们几乎叠在一起。。。但无论我在这里改变什么形式，div都会停留在包装div的左侧，并且不会按比例向下堆叠

<section>
  <div class="container">
    <div><span class="circle">test</span></div>
    <div><span class="circle">test</span></div>
    <div><span class="circle">test three></span></div>
    <div><span class="circle">test</span></div>
    <div><span class="circle">test</span></div>
  </div>
</section>

---

你可以像你那样在

style

属性中添加这些属性，但在大多数情况下，最好在单独的css文件中添加这些属性。

你忘记关闭第三个span+ur代码似乎不起作用，你能提供一个提琴示例吗？啊，很抱歉，这是动态编辑的-至于提琴，我可以提供一个。是的。不过，这似乎奏效了。第三个跨度确实没有闭合（我只是复制了它，没有注意到）。但是，尽管它不好，但它不应该给实际使用带来问题。你忘了将他的.circle类添加到小提琴中：P但它无论如何都能工作，所以我说+1是的，我不认为这很重要。我现在已经添加了它，并且看到了它的一些问题（由于圆圈的边距和大小）。我也纠正了这一点：文本较宽的那个更椭圆，但因为我不知道它应该是什么样子，所以我没有注意到这一点。

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