html - 如何在响应式页面的 div 中居中 ul

Question

我想在响应式页面中放置一个居中的数字列表。我遇到的问题是，当您调整屏幕宽度时，无序列表中的列表项不再在包含的 div 中居中。 我已经删除了 ul 元素上的默认填充，但我认为缺少将它们组合在一起的东西。谁能告诉我哪里出错了？

#content {
  background-color: yellow;
  overflow: hidden;
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
}

#heading {
  text-align: center;
}

#number_container {
  overflow: hidden;
  background-color: #07c;
  width: auto;
}

ul {
  padding-left: 0;
}

li {
  list-style: none;
  display: list-item;
}

ul li a {
  float: left;
  padding: 5px;
  min-width: 35px;
  margin-right: 2px;
  min-height: 35px;
  line-height: 28px;
  color: #333;
  text-decoration: none;
  text-align: center;
  background-color: #fff;
  border: #fff solid 1px;
}

<div id="content">
  <div id="heading">Centered Text</div>
  <div id="number_container">
    <ul>
      <li><a id="1">1</a></li>
      <li><a id="2">2</a></li>
      <li><a id="3">3</a></li>
      <li><a id="4">4</a></li>
      <li><a id="5">5</a></li>
      <li><a id="6">6</a></li>
      <li><a id="7">7</a></li>
      <li><a id="8">8</a></li>
      <li><a id="9">9</a></li>
      <li><a id="10">10</a></li>
      <li><a id="11">11</a></li>
      <li><a id="12">12</a></li>
      <li><a id="13">13</a></li>
      <li><a id="14">14</a></li>
      <li><a id="15">15</a></li>
      <li><a id="16">16</a></li>
      <li><a id="17">17</a></li>
      <li><a id="18">10</a></li>
      <li><a id="19">11</a></li>
      <li><a id="20">12</a></li>
      <li><a id="21">13</a></li>
      <li><a id="22">14</a></li>
      <li><a id="23">15</a></li>
      <li><a id="24">16</a></li>
      <li><a id="25">17</a></li>
    </ul>
  </div>
</div>

Fiddle Link

Answer 1

我的回答的另一个编辑版本: 使用这些设置:

#number_container {
  overflow: hidden;
  background-color: #07c;
  text-align: justify;
}

ul {
  padding: 0;
}
li {
  display: inline-block;
  list-style: none;
}
ul li a {
  display: inline-block;
  padding: 5px 5px 3px 5px;
  margin: 5px;
  min-width: 35px;
  min-height: 35px;
  line-height: 37px;
  color: #333;
  text-decoration: none;
  text-align: center;
  background-color: #fff;
}

这将对齐 <li> 的最后一行剩下的元素，你显然是瞄准的。另一种可能性是 text-align: center;对于 #number_container (另请参阅我的 fiddle https://jsfiddle.net/f77ujsqb/1/ )，它将最后一行居中对齐。