html - 将水平菜单制作到div的中心

Question

我尝试制作水平菜单并且成功了。但是如何让它到达 div 的中心，因为我尝试放置 text-align:center、vertical-align:middle 和 display:inline 。他们根本不工作..

首先，我的 HTML 如下所示

.nav {
  border:1px solid #CCC;
  border-width:1px 0;
  list-style:none;
  margin:0 auto;
  padding:20px 0;
  width:100%;
  text-align: center;
}
 
ul.nav-menu {
    list-style: none;
    padding: 0;
    font-size: 14px;
    line-height: 14px;
    font-family: 'latoregular';
    margin: 0 auto;
    width: 100%;
    text-align:center;
}

ul.nav-menu:after {
    content: "";
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

ul.nav-menu li {
    float: left;
    margin: 0 0 0 10px;
    position: relative;
}

ul.nav-menu li:first-child {
    margin: 0;
}

<div class="nav">
    <ul class="nav-menu">
        <li> <a href="#" class="selected"> HOME </a> </li>
        <li> <a href="#"> PORTFOLIO </a> </li>
        <li> <a href="#"> BLOG </a> </li>
        <li> <a href="#"> CONTACT </a> </li>
    </ul>
</div>

最后，这里是 JSFIDDLE .

如何将 .nav-menu 推到 .nav 的中心？有什么想法吗？

Answer 1

删除 width 并将 display: inline-block 添加到您的 ul.nav-menu:

ul.nav-menu {
    list-style: none;
    padding: 0;
    font-size: 14px;
    line-height: 14px;
    font-family: 'latoregular';
    margin: 0 auto;
    display: inline-block; // add display: inline-block;
    text-align:center;
}

您已经完成了剩下的工作(在父容器上设置 text-align: center)。

Fiddle