如何将“我的”导航栏居中？

Question

因此，我在网上搜索了我可以使用的导航栏，找到一个导航栏后，便将其添加到正在制作的网页中

CSS：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #7A991A;
}

HTML：

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

w3schools链接

无论如何，我将如何将其居中到页面中间？

当我检查其他问题时，它说该问题与float：left有关 ，但是当我尝试用推荐的替代显示替换它时：inline-block; 它会垂直对齐框

任何帮助表示赞赏^^

Answer 1

试试这个CSS：

ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

li {
    display: inline-block;
}

如您所见，它在每个元素之间都留了一点空间，这是因为HTML中的<li>行之间的返回已准备好作为空白，这是因为display: inline-block 。 您可以使用以下方法删除这些空格：

<ul>
  <li><a href="#home">Home</a></li><!--
  --><li><a href="#news">News</a></li><!--
  --><li><a href="#contact">Contact</a></li><!--
  --><li><a href="#about">About</a></li>
</ul>

JSFIDDLE演示