make horizintal menu and its items centered

make horizintal menu and its items centered

i am working on a menu and i want to keep it in center like that

but currently its like that. i tried lot of css tricks but nothing make it
centered as i want so any one help me i will be very thankfull to you for
that kind favour in advance.

here is my 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>
here is my 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
}