JSFiddle

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;的文字。

display: inline-block上的#nav li将每个链接放在一起。

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

更改为：

#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

尝试编辑这样的行：

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

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

3 个答案:

JSFiddle