html - 将 ul 与行居中

Question

我有一个包含 15 行的列表。我想将所有行居中 - 15 行居中。

我尝试使用 text-align: center 但它没有用。所有其他问题都涉及将所有列表项对齐在 1 行中，所以它对我没有帮助。

li {
  list-style: none;
  text-align: center;
}

h1 {
  text-align: center;
}

button {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

<h1>title for perspective</h1>
<button>button for perspective</button>
<ul class="tl">
  <li>test list1</li>
  <li>test list2</li>
  <li>test list3</li>
  <li>test list4</li>
  <li>test list5</li>
  <li>test list6</li>
  <li>test list7</li>
  <li>test list8</li>
  <li>test list9</li>
  <li>test list10</li>
  <li>test list11</li>
  <li>test list12</li>
  <li>test list13</li>
  <li>test list14</li>
  <li>test list15</li>
</ul>

如您所见，列表并没有真正对齐到中心:它有点偏右。

如何将其更改为真正居中？

Answer 1

只需删除'ul'的边距和填充

https://jsfiddle.net/Daandeve/4t1asd9j/1/

ul {
  margin: 0;
  padding: 0;
}