html - 如何居中导航栏

Question

目前正在更新我的网站，但遇到了一个问题，我找不到可行的解决方案。

问题是定位我的导航栏，目前它在一些 JavaScript 下方和页面的左边缘，我希望它直接在 Java Script 下方并居中，css 后跟html如下:

ul {
position: absolute;
left: 0;
top: 50%
width: 100%;
text-align: center;
}
li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin: 0
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}

和 html:

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="http://www.about.trinity-international.com">About</a></li>  
<li><a href="http://www.contact.trinity-international.com">Contact</a></li>

</ul>

这是我目前用来测试它的子域的链接: http://www.beta.trinity-international.com/

谢谢

Answer 1

首先，您在 top: 50% 之后错过了 ;。

1) 移除position: absolute;

2) 将 ul 的宽度更改为 400px(用于测试)

3) 添加: margin: 0 auto;到 ul