导航菜单中的中心链接

Question

我正在建立我的网站，并且我试图横向对齐以下代码而没有运气：http://codepen.io/anon/pen/LZZJrK

如果我没有错，我必须为nav ul添加一个css代码，所以我添加了以下代码，但它无效：

nav ul li {
  display:block;
  text-align:center;
}

有人可以告诉我如何将菜单居中，以便我可以得到以下输出？提前致谢。

Answer 1

将display: table;和margin: 0 auto;添加到nav，如下所示：

nav {
    display: table;
    margin: 0 auto;
}

CodePen

Answer 2

试试这个：

        ul{
text-align:center;}
        li{
display: inline-block;
        float:none;
        text-align:center;
        }

Answer 3

1. 从 float: left 和 nav ul li
中删除nav li媒体资源
2. display:block
将display: inline-block更改为li
3. 将以下内容添加到您的css：

#nav ul {
  text-align:center;
}

CodePen： http://codepen.io/anon/pen/XKKPGO

Answer 4

我认为你真正需要的是项目/链接/按钮的父元素text-align:center

＆＃13;

＆＃13;

#container{
  text-align:center;
}

＆＃13;

<div id="container">
  <a href="#">One</a>
  <a href="#">Two</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

你可以这样做：

nav {
  text-align: center;
}

nav ul {
  display: inline-block;
}

因为ul标签是块级元素，所以它将拉伸父元素的整个宽度

更多信息：here