css - 导航菜单不会居中

我的导航菜单不会居中。而且我在代码中找不到错误。也许有人可以帮助我？

#nav-header {
    height: 60px;
    width: auto;
    background-color: rgba(255, 255, 255, 0.7);
    margin-top: 80px;
}

#nav-header li.nav-link {
    display: inline;
    padding: 20px 20px 20px 20px;
    font-family: 'Source Sans Pro', sans-serif,"Open Sans", "Helvetica",sans-serif;
    font-size: 28pt;
    text-align: inherit;
    margin: 0 auto;


}

 <ul id="nav-header">
    <li class="nav-link"><a href="index.html">Home</a></li>
    <li class="nav-link"><a href="#">Game</a></li>
    <li class="nav-link"><a href="#">Higschore</a></li>
    <li class="nav-link"><a href="#">Contact</a></li>
</ul> 

亲切的问候，

耶尔默

最佳答案

将text-align:center;添加到父元素。

#nav-header {
    height: 60px;
    width: auto;
    background-color: rgba(255, 255, 255, 0.7);
    margin-top: 80px;
    text-align:center; /* see here */
}

#nav-header li.nav-link {
    display: inline-block; /* preferable to plain inline */
    padding: 20px 20px 20px 20px;
    font-family: 'Source Sans Pro', sans-serif,"Open Sans", "Helvetica",sans-serif;
    font-size: 28pt;
    text-align: inherit;
    margin: 0 auto;


}

 <ul id="nav-header">
    <li class="nav-link"><a href="index.html">Home</a></li>
    <li class="nav-link"><a href="#">Game</a></li>
    <li class="nav-link"><a href="#">Higschore</a></li>
    <li class="nav-link"><a href="#">Contact</a></li>
</ul> 

关于css - 导航菜单不会居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28459703/