以行居中ul

Question

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

我尝试使用text-align: center，但是没有用。所有其他问题都涉及将所有列表项排成一行，因此这对我没有帮助。

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

Answer 2

<ul>上的边距和填充来自浏览器添加到元素的默认样式。例如，如果您打开Chrome的DevTools并检查<ul>元素，您将看到这样的样式。 用户代理样式表是指浏览器的默认样式。由于浏览器默认具有1em和16px，因此font-size: 16px的页边空白变为padding-left:40px。

由于浏览器之间的默认样式并不相同，一种常见的技术是使用重置样式表（如Eric Meyer's Reset CSS或Nicolas Gallagher's normalize.css）来减少这些浏览器的不一致。

在这种情况下，您需要删除padding-left以使元素保持水平对齐。

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

h1 {
  text-align: center;
}

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

/*newly added*/
ul.tl{
  padding-left:0;
}

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

这里的问题是左边的空白。添加一个：

ul{ padding-left : 0; }

到您的CSS，就可以了。 我建议您使用浏览器上的开发人员控制台来了解这种问题，如下所示。

。

Answer 4

问题是UL标签上的左空白。向左填充：0；应该非常确定。

Answer 5

UL元素的左填充为20px。如果删除，列表将居中。