Question

目前正在更新我的网站并遇到了一个无法找到有效解决方案的问题。

问题在于定位我的导航栏，当它位于某些JavaScript下方和页面的左边缘时，我希望它直接位于Java脚本下方并居中，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

如果删除C:\program files (x86)\Microsoft Sql Server\110\DAC\bin内C:\program files (x86)\Microsoft Visual Studio XX.0\Common7\IDE\Extensions\Microsoft\SQLDB\DAC\120交换ul { }中li的所有样式，它将在中间对齐。

我建议尽可能避免通过绝对定位从文档流中取出元素。

Answer 2

首先，您在 top：50％之后错过了; 。

1）删除位置：绝对;

2）将ul的宽度更改为400px（用于测试）

3）添加：保证金：0自动;到ul

如何使导航栏居中

2 个答案: