Centrer ul dans div verticalement et horizontalement

Question

Quelqu'un peut-il m'aider à centrer le "ul" dans le "div" verticalement et horizontalement selon le code ci-dessous?

Merci beaucoup!

    Link 1
    Link 2

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

Utilisez display: inline-block combiné avec text-align: center. C'est bon car cela continuera à fonctionner si vous ajoutez ou supprimez des liens.

Voir : http://jsfiddle.net/thirtydot/VCZgW/

Les changements importants que j'ai apportés :

#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

Cela ne résoudra pas directement votre problème, mais ce sont mes liens préférés pour les problèmes de centrage en CSS

Horizontal

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

Vertical

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

Answer 3

La bonne chose à faire est la suivante :

vous mettez du style sur un ul {display:table; margin:0 auto;}

c'est tout ;)