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

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

我将display:inline块添加到li和ul，并将text-align:center增加到nav。这将使页边空白顶部起作用。

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

请在此处查看：https://jsfiddle.net/w3hn1L95/

Answer 3

您需要添加一个

test-align: center;

到css中的ul元素。