居中导航菜单答案

【问题标题】：Centering a navigation menu居中导航菜单
【发布时间】：2014-10-26 00:50:54
【问题描述】：

我一直无法在博客上将导航栏居中。我似乎是一件很容易正常做的事情，但这一次很麻烦。

我试过 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>

【问题讨论】：

How I can center a menu bar with ul的可能重复

标签： html css menu navigation center

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

将float: left; 删除为.tabs .widget li, .tabs .widget li

试试这个：

.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
}

代替：

.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
float: left;
}

【讨论】：

【解决方案3】：

添加文本对齐：居中；到父 div

【讨论】：