使水平菜单及其项目居中

Question

我正在制作菜单，我希望将其保持在中心位置

但目前就是这样。我尝试了很多css技巧，但没有任何东西让它居中，因为我想要任何人帮助我，我会非常感谢你提前给予的那种恩惠。

这是我的HTML

  <div class="nav-menu">
            <ul>
                <li><a href="">All</a></li>
                <li><a href="">Animals</a></li>
                <li><a href="">Funny</a></li>
                <li><a href="">Gifs</a></li>
                <li><a href="">Mems</a></li>
                <li><a href="">TV</a></li>
                <li><a href="">Social Media</a></li>
                <li><a href="">Text</a></li>
                <li><a href="">Like A Boss</a></li>
                <li><a href="">Fail</a></li>
                <li><a href="">Demotivational</a></li>
                <li><a href=""></a></li>
                <li><a href="">WTF</a></li>
                <li><a href="">Awesome</a></li>
                <li><a href="">Videos</a></li>

            </ul>    
        </div> 

这是我的css

.nav-menu{
display: table;
width:570px;
}
.nav-menu ul{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
margin: auto;
width: 570px;
}

.nav-menu ul li{
display:inline-block;
float:left;
margin-right:25px;
margin-bottom:10px;
}

.nav-menu ul li a{

float:left;
margin:0;
text-decoration:none;
color:#9e9e9e;
font-size:11px;
text-align: center;
}

.nav-menu ul li a:hover{
display:block;
float:left;
margin:0;
text-decoration:underline;
color:#b8c5b2;
font-size:11px
}   

Answer 1

是的，请看this fiddle。新CSS：

.nav-menu {
    width:570px;
    text-align:center;
    background:#000;
}
.nav-menu ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    margin: auto;
    list-style:none;
}
.nav-menu ul li {
    display:inline-block;
    margin-right:25px;
    margin-bottom:10px;
}
...

我已移除float:left上的.nav-menu ul li，删除了.nav-menu ul上的宽度，并将text-align:center移至.nav-menu。

更新我还删除了display:table，因为我想您已将此添加为您的某个测试，但它只是不需要。