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

Question

Im trying to centre align a image based navigation menu, i have read a few different posts, but none of them seem to be working.

My HTML is as follows:

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

and my CSS is as follows:

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

Any help would be greatly appreciated.

Thank you

Answer 1

li a needs to be display: block or inline-block to remove the text with text-indent: -9999px; .

The display: inline-block on #nav li places each link next to each other.

Have a fiddle!

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

Change to this:

#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

Answer 3

try to edit these lines like this:

#nav li a {
display: block;
text-indent: -9999px;
overflow: hidden;
height: 16px;
background: no-repeat center center;
}

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