無法居中導航欄

我試了太久，因爲我想坦白。我有一個非常基本的網站，我經過很長時間的努力能夠居中標題圖像，但導航欄不想。無法居中導航欄

這裏是我的CSS：

nav { 
background-color: #fff; 
border: 1px solid #dedede; 
border-radius: 4px; 
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); 
color: #888; 
display: block; 
margin: 8px 22px 8px 22px; 
overflow: hidden; 
width: 510px; 
text-align: center; 
} 

nav ul { 
    margin: 0; 
    padding: 0; 
}

這裏是我的html：

<div style="text-align:center"><img src="/images/headerbackgr1.png" alt="header_backgr"></div> 

<nav> 
<ul> 
    <li><a href="index.php">Home</a></li> 
    <li><a href="/owncloud/index.php">ownCloud</a></li> 
    <li><a href="download.php">Downloads</a></li> 
    <li> 
     <a href="about.html">Über BenDroid <span class="caret"></span></a> 
     <div> 
      <ul> 
       <!--ausgeblendete Optionen 
       <li><a href="location.htm">Standort</a></li> 
       <li><a href="staff.htm">Team</a></li> 
       --> 
       <li><a href="contact.php">Kontakt</a></li> 
      </ul> 
     </div> 
    </li> 
</ul>

繼承人小提琴：http://jsfiddle.net/68x4uL1g/1/

任何幫助是極大的讚賞。

來源

2015-02-24 BenDroid

讓您的導航元素的利潤率是有意義的這樣的場景：

margin: 8px auto;

這會自動給該元素的8像素頂部和底部邊緣和中心，它在左，右頁邊距使他們平等的。

您現在有

margin: 8px 22px 8px 22px;

指定你的左，右頁邊距是它具有菜單上不必要的影響的22px。

這是你的小提琴與變革：

JSFiddle

提醒：這是正確的，但請記住，這會同時包含元素的父居中nav。在定義包含元素的寬度時請記住這一點。

來源

2015-02-24 20:54:57 leigero

謝謝。我現在覺得很愚蠢。 – BenDroid 2015-02-26 14:35:39

@BenDroid沒有問題是一個愚蠢的問題。當你提出問題時，請確保你接受答案。接受有用的答案與在SO上提出良好問題一樣重要。這就是讓這個網站對追隨我們的人有用的原因。 – leigero 2015-02-26 14:37:54

無法居中導航欄

回答

相關問題