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

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 {

  margin: 0;

  padding: 0;

  justify-content: center;

  text-align: center;

  display: flex;

}

nav {

  background-color: red;

}

ul {

  justify-content: center;

  text-align: center;

  list-style: none;

  height: 35px;

  background-color: purple;

  width: 50%;

  display: flex;

  flex-direction: row;

}

ul li {

  margin-top: 10px;

}

ul li a {

  text-decoration: none;

  color: black;

  padding: 5px;

}

ul li:hover {

  background-color: blue;

}

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

Answer 2

我向 li 和 ul添加了display:inline-block ，向 nav添加了 text-align:center 。这将成为利润最高的作品。

* {

  margin: 0;

  padding: 0;

}

nav {

  text-align: center

}

ul {

  list-style: none;

  height: 35px;

  background-color: purple;

  width: 50%;

  display: inline-block

}

nav ul li {

  display: inline-block;

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

您需要添加一个

test-align: center;

到你的ulCSS元素。