时间戳

首页 > 解决方案 > CSS：li 不会在 ul 中居中

html - CSS：li 不会在 ul 中居中

问题描述

我试图在 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>

标签： htmlcss

解决方案

您需要将ul填充设置为 0。默认情况下，它设置为 40 像素。

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

推荐阅读