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

Question

我试图居中对齐基于图像的导航菜单，我已经阅读了一些不同的帖子，但他们似乎都没有工作。

我的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>

和我的CSS如下:

#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;
}

任何帮助都将是非常感激的。

谢谢

Answer 1

li a需要为display: block或inline-block才能用text-indent: -9999px;删除文本。

#nav li上的display: inline-block将每个链接相邻放置。

玩得开心点!

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>
</ul>

CSS

#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;
}

Answer 2

改成:

#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;
}

<标题> JSFiddle