Question

我环顾四周，无法找到如何水平居中我的固定导航栏。

如果你能告诉我如何解释原因。

感谢。

#nav {
  list-style: none;
  position: fixed;
  margin-top: -10px;
  width: 100%;
  font-family: Product Sans;
  font-size: 0;
}
#nav li {
  width: 200px;
  height: 50px;
  display: inline-block;
  text-align: center;
  padding-top: 5px;
  background-color: white;
  font-size: 30px;
}

<ul id="nav">
  <li>stack</li>
  <li>over</li>
  <li>flow</li>
</ul>

Answer 1

您必须将ul项目居中对齐ul

所以CSS将是

<style>

#nav{
  list-style: none;
  position: fixed;
  margin-top: -10px;
  width: 100%;
  font-family: Product Sans;
  font-size: 0;
  text-align:center;
  padding-left:0px;
}
#nav li{
  width: 200px;
  height: 50px;
  display: inline-block;
  text-align: center;
  padding-top: 5px;
  background-color: white;
  font-size: 30px;
}


</style>

并保持html不做任何更改

Answer 2

您只需将text-align: center;添加到 #nav ，就像这样：

<style>
 #nav{
  list-style: none;
  position: fixed;
  margin-top: -10px;
  width: 100%;
  font-family: Product Sans;
  font-size: 0;
  text-align: center; /* <--- */
}
</style>

如何水平居中固定导航栏？

2 个答案: