html - 如何让导航栏居中对齐

Question

我的导航栏代码来自over here .

但是，它向左对齐而不是向中心对齐。我怎么能这样做？

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>

CSS

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   text-align:center;
   font-family:arial;
}

li {
   float: left;
}

   a:link, a:visited {
   display: block;
   width: 120px;
   font-weight: bold;
   color: #FFFFFF;
   background-color:black;
   text-align: center;
   padding: 6px;
   font-family:arial;
   text-decoration: none;
} 

   a:hover, a:active {
   background-color:grey;
}

Answer 1

text-align 不会影响 float 元素。但是，它会影响内联 元素。

改变:

li {
   float: left;
}

收件人:

li {
    display: inline-block;
}

JSFiddle demo .

---

Thank you, but there are white gaps between the buttons, how can I close them ?

要修复白色间隙，您需要将 ul 的字体大小设置为 0，将 li 的字体大小设置为您希望列表项具有的字体大小。

ul {
    font-size: 0;
}

li {
    display: inline-block;
    font-size: 16px;
}

JSFiddle demo .