html - 将导航菜单居中

Question

我一直无法在 Blogger 上将导航栏居中。平时我觉得是一件很容易做的事，但这次却很麻烦。

看看网站:Center Navigation

我试过 text-align, margin:0 auto;等等等等。似乎没有任何效果!

如果有人能帮助我，那就太好了，干杯

当前代码:

.nav{
position: relative;
margin: auto;
list-style-type: none;
text-transform: uppercase;
text-align: center;
border-top: 1px solid #aaaaaa;
list-style:none;
text-align:center;

}

li {
    display:inline-block;
}


<ul class="nav">
<li><a href="http://www.hannahallinson.com/">Home</a></li>
<li><a href="http://www.hannahallinson.com/p/about.html">About</a></li>
<li><a href="http://www.hannahallinson.com/p/contact.html">Contact</a></li> 
<li><a href="http://www.instagram.com/hannahallinson">Instagram</a></li>
<li><a href="http://www.twitter.com/hannahallinson">Twitter</a></li>
</ul>

Answer 1

text-align:center 和 margin:0 auto 在逻辑上只能在要居中的元素具有非默认宽度时起作用，因为否则 auto，对于 block 元素是 100%。填满其整个父级的元素不能居中。

给 ul.nav 一个固定的宽度，它会居中。

要使用 text-align:center，您还需要限制 ul，例如也将其设置为 display:inline-block。 See this sample .