html - UL 不会在 div 的中心对齐

Question

我希望我的 ul 位于我的 div 的中心，但这可行。即使我试图将代码居中，代码仍会继续显示在网页的左侧。我尝试了几种不同的解决方案但无济于事。这是我的代码:

HTML:

<div id="nav">
   <ul class="links">
      <!--PHP code will return menu set in <li> and <a> tags-->
      <?php include "setMenu.php";?>
   </ul>
</div>

CSS:

#nav {
    border: 1px black solid;
}

#nav ul{
    display: block-inline;
    margin: 0px auto;
}

#nav li {
    float: left;
    padding: 5px 5%;
    margin-right: 5px;
    background-image: url("../images/button_background.jpg");
    color: white;
    border-radius: 3px;
    position: center;
    border: 1px black solid;
}

#nav li:hover{
    color: black;
    background-image: url("../images/button_background_hover.jpg");
}

Answer 1

试试这个:

#nav ul{
    width: 40%;
    margin: 0 auto;
}

或

#nav ul{
    display: table;
    margin: 0 auto;
}

http://jsfiddle.net/4tnwjrag/2/

例子:

#nav {
border: 1px black solid;
background:green;
}

#nav ul{
display: table;
margin: 0 auto;
margin: 0px auto;
background:blue;
margin:0 auto;
padding:0;
}

#nav li {
padding: 5px 5%;
display:table-cell;
width:120px;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
list-style:none;
border-radius: 3px;
position: center;
border: 1px black solid;
}

#nav li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}

<div id="nav">
   <ul class="links">
      <!--PHP code will return menu set in <li> and <a> tags-->
       <li>zz</li>
       <li>zz</li>
       <li>zz</li>
   </ul>
</div>