为什么我的链接没有显示在中心？

Question

我正在学习 html css，现在我想创建导航栏作为我的任务。因此，当我尝试创建水平导航栏时，我的菜单没有显示在导航栏 div 的中心？为什么它与顶角相连？我希望它们从顶部和底部居中，这是我的代码，纠正我的错误

* {

  margin: 0;

  padding: 0;

}

nav {

  background-color: red;

}

ul {

  list-style: none;

  height: 35px;

  background-color: purple;

  width: 50%;

}

nav ul li {

  display: inline;

  padding: 10px;

  margin-top: 10px;

}

nav ul li a {

  text-decoration: none;

  color: black;

}

nav ul li:hover {

  background-color: blue;

}

<nav>

  <ul>

    <li> <a href="">Home</a></li>

    <li> <a href="">About Us</a></li>

    <li> <a href="">Contact Us</a></li>

    <li> <a href="">Privacy Policy</a></li>

  </ul>

</nav>

Answer 1

这是您可以执行的操作，flex如果需要，您可以使用和调整您的代码。body {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; justify-content: center;&nbsp; text-align: center;&nbsp; display: flex;}nav {&nbsp; background-color: red;}ul {&nbsp; justify-content: center;&nbsp; text-align: center;&nbsp; list-style: none;&nbsp; height: 35px;&nbsp; background-color: purple;&nbsp; width: 50%;&nbsp; display: flex;&nbsp; flex-direction: row;}ul li {&nbsp; margin-top: 10px;}ul li a {&nbsp; text-decoration: none;&nbsp; color: black;&nbsp; padding: 5px;}ul li:hover {&nbsp; background-color: blue;}<ul>&nbsp; <li> <a href="">Home</a></li>&nbsp; <li> <a href="">About Us</a></li>&nbsp; <li> <a href="">Contact Us</a></li>&nbsp; <li> <a href="">Privacy Policy</a></li></ul>

Answer 2

我向 li 和 ul添加了display:inline-block ，向 nav添加了 text-align:center 。这将成为利润最高的作品。* {&nbsp; margin: 0;&nbsp; padding: 0;}nav {&nbsp; text-align: center}ul {&nbsp; list-style: none;&nbsp; height: 35px;&nbsp; background-color: purple;&nbsp; width: 50%;&nbsp; display: inline-block}nav ul li {&nbsp; display: inline-block;&nbsp; padding: 10px;}nav ul li a {&nbsp; text-decoration: none;&nbsp; color: black;}nav ul li:hover {&nbsp; background-color: blue;}<nav>&nbsp; <ul>&nbsp; &nbsp; <li> <a href="">Home</a></li>&nbsp; &nbsp; <li> <a href="">About Us</a></li>&nbsp; &nbsp; <li> <a href="">Contact Us</a></li>&nbsp; &nbsp; <li> <a href="">Privacy Policy</a></li>&nbsp; </ul></nav>

Answer 3

您需要添加一个test-align:&nbsp;center;到你的ulCSS元素。