html - 使水平菜单及其项目居中

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

是的，当然，看看这个小提琴。新的 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因为我想你将它添加为你的测试之一，但它根本不需要。