css - 居中一行div

Question

我在想出一件相对容易的事情时遇到了一些困难，但无论我尝试什么，我似乎都无法理解它，我无法让我的 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;
}

因此，我需要将它们分开设置，留出均匀的边距，并且当屏幕缩小时它们几乎堆叠在彼此之上......但无论我在这里更改什么形式，div 都会留在包装内的左侧div 并且不按比例堆叠。

Answer 1

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

您可以像以前一样使用 text-align: center，但要使其正常工作，div 必须是内联或内联 block 元素，如下所示:

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

您可以像以前一样在 style 属性中添加这些属性，但在大多数情况下，最好将其添加到单独的 css 文件中。