HTML/CSS-居中对齐UL导航菜单

我正在尝试将一个基于图像的导航菜单居中对齐，我读过一些不同的帖子，但似乎没有一篇有效

我的HTML如下所示：

<ul id="nav">
    <li id="films"><a href="#">Films</a></li>
    <li id="music"><a href="#">Music</a></li>
    <li id="contact"><a href="#">Contact</a></li>
    <br class="clear">
</ul>

#nav {
    width: 566px;
    list-style: none;
    margin: 0;
    padding: 0;
    margin: 0 auto;
}
#nav li {
    float: left;
    margin: 0 10px;
}
#nav li a {
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    height: 16px;
}

#nav li#films a {
    background: url(images/FILMS.png) no-repeat;
    width: 59px;
}
#nav li#music a {
    background: url(images/MUSIC.png) no-repeat;
    width: 70px;
}
#nav li#contact a {
    background: url(images/CONTACT.png) no-repeat;
    width: 107px;
}
.clear {
    clear: both;
}

任何帮助都将不胜感激

谢谢

更改为：

#nav {
    width: 566px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}
#nav li {
    margin: 0 10px;
    display: inline-block;
}
#nav li a {
    text-indent: -9999px;
    overflow: hidden;
    height: 16px;
}

---

li a

需要

display:block

或

inline block

删除带有

文本缩进：-9999px的文本

#nav li
上的
显示：内联块
将每个链接放置在彼此相邻的位置


HTML

用于增强您的问题。不太确定JSFIDLE是什么，但是
<ul id="nav">
    <li id="films"><a href="#">Films</a>

    </li>
    <li id="music"><a href="#">Music</a>

    </li>
    <li id="contact"><a href="#">Contact</a>

    </li>
</ul>

#nav {
    width: 306px;
    /* Wide enough for all links */
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}
#nav li {
    margin: 0 10px;
    display: inline-block;
}
#nav li a {
    text-indent: -9999px;
    display: block;
    height: 16px;
}
#nav li#films a {
    background: url(http://www.placehold.it/59X16) no-repeat;
    width: 59px;
}
#nav li#music a {
    background: url(http://www.placehold.it/70X16) no-repeat;
    width: 70px;
}
#nav li#contact a {
    background: url(http://www.placehold.it/107X16) no-repeat;
    width: 107px;
}