Html 将列表水平居中，其中包含左浮动、左对齐的项目

我有一个

div

包含几个

部分。其中一个
部分
s包含一个
ol
，其所有
li
都向左浮动。我试图使
ol
缩小，以在一行上包含尽可能多的
li
s，并使
ol
水平居中，同时保持
li
s左对齐

以下是我所拥有的：

当
li
s可以全部放在一行中时，列表居中：

当
li
s落在第二行时，
部分
和
ol
将增长，整个内容将左对齐：

我试图让它看起来像这样（取决于可用的宽度，
部分也可以根据需要缩小）：

设置宽度或最大宽度并使用
margin:auto
也不起作用：

为什么
ol
不收缩？如何解决此问题？


这些问题相似但不同：


-在接受的答案中，所有列表项都居中
-每个项目都有自己的行
ol的
ol
居中。您已将其设置为
65%
width。如果在调整橙色边框的大小时查看它，它总是居中的

编辑
让我试着换一种说法。
ol
是块元素，与
div
是块元素的方式相同。这意味着它会填满它所在的空间。在您的示例中，这由橙色边框表示。您想要的是
ol
占用的空间少于100%。有很多不同的方法可以做到这一点，但你总是从尽可能多地占用空间的列表开始

其中一种方法是设置宽度。问题是你不想要固定的宽度。因此，您尝试使用百分比设置宽度。这不起作用，因为有很多间隔，其中一个百分比将导致
li
不居中

另一种方法是设置
ol
的左右边距。其工作原理与设置宽度相同

没有一种方法可以将某个元素居中，而您也希望
float:left。我认为混淆是因为您认为可以使
ol
环绕
li
。问题是，这不是
ol
的工作原理。
对不起，我的意思是70%。我直接转到了您提供的链接，该链接显示设置宽度不起作用，因为有额外的空间使事物偏离中心。与上一张图片对比，这张图片显示了我正在尝试做的事情。我是从开始工作的，但我会说得更清楚。不过它确实有效。额外的空间在那里，因为您使用的是百分比。如果将百分比与浮动一起使用，您几乎总是会偏离中心。例如，尝试将
#list
的百分比宽度更改为
宽度：330px我想找到一个一般情况，它将使用可用的宽度，再次更新问题。
<div id="wrapper">
 <section id="section">
  <ol id="list">
   <li id="i0"></li>
   <li id="i1"></li>
   <li id="i2"></li>
   <li id="i3"></li>
   <li id="i4"></li>
  </ol>
 </section>
</div>

#wrapper {
  width: 85%;
  text-align: center;
}

#section {
  display: inline-block;
}

#list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

#list > li {
  width: 100px;
  height: 100px;
  float: left;
}