基本HTML爲什麼我不能將導航欄居中？

我似乎無法讓我的導航欄和中間的徽標位於頁面的中心。基本HTML爲什麼我不能將導航欄居中？

我在做什麼錯？容器是問題嗎？

<link href="style/style.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div class="container"> 
    <header> 
     <div id="header" class="clearfix"> 
     <ul> 
      <li><a href="index.html">HOME</a></li> 
      <li><a href="music.html">MUSIC</a></li> 
      <li> 
       <div class="headerimage"><img src="images/header.png" alt="Richi Rich Logo"></div> 
      </li> 
      <li><a href="about.html">ABOUT</a></li> 
      <li><a href="index.html">GALLERY</a></li> 
     </ul> 
    </div><!--end header--> 

    <div class="footer"> Richard Medhurst © 2013</div> 
</div> 

</body> 
    </html>

我的CSS樣式表是在這裏：https://www.dropbox.com/s/j7r373e5qwx0vji/style.css

來源

2013-12-08 user3080167

您需要從1200像素降低ul的寬度400像素

DEMO http://jsfiddle.net/LstNS/38/

#header ul { 
    margin:0 auto; 
    width:400px; 
    list-style: none; 
    *zoom: 1; 
}

來源

2013-12-08 16:24:42 Vector

感謝載體。但我想保留中間的標誌。如果我將ul從1200px更改爲400px，它看起來像這樣。 http://postimg.org/image/wa2gc5ec3/ – user3080167

試試這個，它將在1200像素以上的顯示器上工作。這裏有一個FIDDLE

#header li { 
    display:inline-block; 
    height: 160px; /* Height of the image */ 
    vertical-align: top; 
    margin-top: -3px; 

} 
.headerimage img { 
    margin-top: -55px; 
    /* For demo purpose */ 
    width: 500px; 
    height: 160px; 
}

來源

2013-12-08 18:49:37 mdesdev

這一切都放在中心，謝謝。但現在，「家庭，音樂等」鏈接不再處於黃線 - 只有我的標識是有沒有辦法讓這些字母上去？ http://s24.postimg.org/8o3hpmadx /Untitled_1.jpg – user3080167

@ user3080167現在試試吧，我已經更新了我的答案。 – mdesdev

天才！你完全是個搖滾男人！:)謝謝一堆，這讓我很生氣，能否告訴我我做錯了什麼，所以我可以在將來避免它嗎？再次感謝！ – user3080167

基本HTML爲什麼我不能將導航欄居中？

回答

相關問題