CSS：li不会在ul内居中[重复]答案

【问题标题】：CSS: li wont center inside a ul [duplicate]CSS：li不会在ul内居中[重复]
【发布时间】：2019-02-24 01:18:39
【问题描述】：

我正在尝试将列表置于 ul 中，但它不起作用。怎么了？我使用了使用过的文本中心，但它仍然无法正常工作。

.mainNav {
  background-color: #B00002;
  margin-right: auto;
  margin-left: auto;
  list-style-type: none;
  width: 204px;
  margin-top: auto;
  text-align: center;
}

li {
  text-align: center;
}

a {
  color: #FFFFFF;
  font-size: 33px;
  padding-right: 37px;
  padding-left: 37px;
  text-decoration: none;
}

<body>
  <ul class="mainNav">
    <li><a href="index.html">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Other</a></li>
  </ul>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

您需要将ul 内边距设置为 0。默认设置为 40px。

.mainNav {
background-color: #B00002;
margin-right: auto;
margin-left: auto;
list-style-type: none;
width: 204px;
margin-top: auto;
text-align: center;
padding: 0;
}
li {
text-align: center;
}
a {
color: #FFFFFF;
font-size: 33px;
padding-right: 37px;
padding-left: 37px;
text-decoration: none;

 <ul class="mainNav">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Other</a></li>
</ul>

【讨论】：

【解决方案2】：

只需从ul 中删除填充。

.mainNav {
  background-color: #B00002;
  margin-right: auto;
  margin-left: auto;
  list-style-type: none;
  width: 204px;
  margin-top: auto;
  text-align: center;
  padding: 0; /* HERE */
}

li {
  text-align: center;
}

a {
  color: #FFFFFF;
  font-size: 33px;
  padding-right: 37px;
  padding-left: 37px;
  text-decoration: none;
}

<body>
  <ul class="mainNav">
    <li><a href="index.html">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Other</a></li>
  </ul>
</body>

【讨论】：

【解决方案3】：

只需从 li 和 .mainNav 中删除 text-align

.mainNav {
  background-color: #B00002;
  margin-right: auto;
  margin-left: auto;
  list-style-type: none;
  width: 204px;
  margin-top: auto;
}

li {
}

a {
  color: #FFFFFF;
  font-size: 33px;
  padding-right: 37px;
  padding-left: 37px;
  text-decoration: none;
}

<body>
  <ul class="mainNav">
    <li><a href="index.html">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Other</a></li>
  </ul>
</body>

【讨论】：