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刪除與的文字。

display: inline-block on #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; 
}