垂直和水平方向的中心ul div

Question

根據下面的代碼，有人可以幫助我將「ul」垂直和水平居中放在「div」中嗎？

非常感謝！

<div id="nav"> 
    <ul> 
    <li><a class="top" href="#top"><span></span></a></li> 
    <li><a class="bottom" href="#bottom"><span></span></a></li> 
    <li><a>Link 1</a></li> 
    <li><a>Link 2</a></li> 
    </ul> 
</div> 

CSS

#nav { 
    height:35px; 
    border-bottom:1px solid #ddd; 
    position:fixed; 
    top:0px; 
    left:0px; 
    right:0px; 
    background:#fff url(../images/navigation/nav.png) repeat-x center left; 
    z-index:999999; 
} 

#nav ul { 
    list-style:none; 
    margin:auto; 
    float:left; 
    padding:0; 
    display: block; 
} 

#nav ul li { 
    display:inline; 
    float:left; 
    margin:0px 2px; 
} 

#nav a { 
    font-size:13px; 
    font-weight:bold; 
    float:left; 
    padding: 2px 4px; 
    color:#999; 
    text-decoration: none; 
    border:1px solid #ccc; 
    cursor: pointer; 
    background:transparent url(../images/navigation/overlay.png) repeat-x center left; 
    height:16px; 
    line-height:16px; 
} 

#nav a:hover { 
    background:#D9D9DA none; 
    color: #fff; 
} 

#nav a.top span, #nav a.bottom span { 
    float:left; 
    width:16px; 
    height:16px; 
} 

#nav a.top span { 
    background:transparent url(../images/navigation/top.png) no-repeat center center; 
} 

#nav a.bottom span { 
    background:transparent url(../images/navigation/bottom.png) no-repeat center center; 
} 

Answer 1

使用display: inline-block結合text-align: center。這很好，因爲如果您添加或刪除鏈接，它將繼續工作。

參見：http://jsfiddle.net/thirtydot/VCZgW/

的重大變化 - 我做：

#nav { 
    /*height:35px;*/ 
    padding: 6px 0; 
} 
#nav ul { 
    /*float:left;*/ 
    text-align: center; 
} 
#nav ul li { 
    /*float:left;*/ 
    vertical-align: top; 
    display: inline-block; 
} 

Answer 2

這不會直接解決您的問題，但這些都是我去爲CSS定心問題

橫向聯繫

http://dorward.me.uk/www/centre/

立式

http://phrogz.net/css/vertical-align/index.html

Answer 3

做的正確的事情是這樣的：

你把風格上ul {display:table; margin:0 auto;}

即所有;）