Why my links are not displaying at center? - html

Question

i am learning html css, now i want to create nav bar as my task. so when am trying to create horizontal nav bar, my menus are not showing at the center of my nav bar div ? why its attached with top corner ? i want them at center from top and bottom here is my code correct my mistake
* {
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> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
</ul>
</nav>

Answer 1

Here is what you can do, you can use flex and tweak your code if needed.
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> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
</ul>

Answer 2

I added display:inline-block to both li and ul and text-align:center to nav.
and that will make margin-top works.
* {
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> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
</ul>
</nav>
check here: https://jsfiddle.net/w3hn1L95/

Answer 3

You need to add a
test-align: center;
to your ul element in css.