固定導航欄

我有一個導航欄，我想保持固定並居中。我現在有一箇中心欄，但是當我添加'position：fixed'時，它將我的導航欄一直移動到屏幕的左側。我的導航欄目前約爲屏幕頂部的20％（居中）。固定導航欄

CSS：

div.social-wrap{ 
width: 500px; 
margin: 0 auto 0 auto; 
padding-top: 25px; 
}

HTML：

<div class="social-wrap"> 
     <ul> 
      <li><a href="index.html" class="link_home shadow extend">Home</a> 
      </li> 
      <li><a href="about.html" class="link_identity shadow extend">Identity</a> 
      </li> 
      <li><a href="books.html" class="link_books shadow extend">Books</a> 
      </li> 
      <li><a href="contact.html" class="link_contact shadow extend">Contact</a> 
      </li> 
      <li><a href="https://twitter.com/Christdentity" class="link_twitter shadow extend" target="_blank">Twitter</a> 
      </li> 
     </ul> 
</div>

這裏是的jsfiddle：

http://jsfiddle.net/Sederu/uPZuu/

來源

2013-04-16 Seth Urquhart

你是什麼意思保持固定？固定寬度？ – fotanus

抱歉，這是位置。所以當你滾動時，它不會向上移動，但保持原位。 –

你的使用固定定位時，<div>正在轉移因爲，默認its taken out of the document flow並相對於它最近的定位祖先（靜態除外）..在你的情況下可能是根<html>元素，如果你沒有任何其他定位祖先爲您的導航欄。如果它移動到視口的左上角，這是有道理的。

你基本上需要設置left屬性爲50％居中，還需要將margin-left設置爲div寬度的負半邊以將中心移向div的中間。

例子：

div.social-wrap{ 
width: 500px; 
position: fixed; 
left: 50%; 
margin-left: -250px; 
padding-top: 25px; 
}

來源

2013-04-16 16:05:04 Adrift

修復了它，但它將導航欄一直移動到屏幕底部並擠入左側角落。 –

我看到..請提供一個[jsFiddle]（http://jsfiddle.net），以便我可以幫助你更好.. – Adrift

我已經在上面或在這裏：http://jsfiddle.net/Sederu/uPZuu/ –

回答

相關問題