固定导航栏无法居中

Question

基本上，我希望在我的网站上有一个固定的导航栏，当你向下滚动时它会随着你移动。到目前为止，一切都很好，但我真的很难将酒吧居中。

HTML

<header id="header">
<nav id="nav">
    <ul>
    <li><a href="#slide1">Front</a></li>
    <li><a href="#slide2">Mastering</a></li>
    <li><a href="#slide3">Samples</a></li>
    <li><a href="#slide4">Contact</a></li>
    </ul>
</nav>
</header>

CSS

#header {
z-index: 1;
width: 100%;
height: 80px;
position: fixed;
background-color:rgba(0,0,0,0.8);
display: block;
}

#nav { 
z-index: 1;
width:100%;
margin-top: 20px;
display: block;
position: fixed;
text-align:center;
}

#nav ul{
list-style: none;
display: block;
margin: 0 auto;
width: 50%;
/* To help to identify the location */
height:50px;
background-color:green;
}

#nav li{
margin-top: 9px;
float: left;
padding-left: 21px;
display:block;
}

JSFiddle https://jsfiddle.net/kjr1591d/1/

很想得到一些帮助。提前谢谢你:)

Answer 1

我认为您正在寻找类似的东西-

#header {
    z-index: 1;
    width: 100%;
    height: 80px;
    position: fixed;
    background-color:rgba(0,0,0,0.8);
    display: block;
}

#nav { 
    z-index: 1;
    width:100%;
    margin: 15px 0;
    display: block;
    position: fixed;
    text-align:center;
}

#nav ul{
    list-style: none;
    display: block;
    margin: 0 auto;
    width: 50%;
    /* To help to identify the location */
    height:50px;
    background-color:green;
    text-align:center;
    padding:0
}

#nav li{
    margin:15px 0 0;
    /*float: left;*/
    padding:0 10px;
    display:inline-block;
}

<header id="header">           
    <nav id="nav">
        <ul>
            <li><a href="#slide1">Front</a></li>
            <li><a href="#slide2">Mastering</a></li>
            <li><a href="#slide3">Samples</a></li>
            <li><a href="#slide4">Contact</a></li>
        </ul>
    </nav>
</header>

Answer 2

jiddle

#nav ul{
list-style: none;
display: block;
margin: 0 auto;
width: 80%;
/* To help to identify the location */
height:50px;
background-color:green;
}

Answer 3

将ul 和li 更改为显示为inline-block，并为li 分配相同大小的左右边距。