中心導航欄與標誌在中間

Question

我想有一個導航欄，固定在頂部和水平居中。我還想讓我的標誌（ADRENALIZE）在導航中居中。一直試着這幾天，似乎沒有任何工作。

我有我的代碼在這裏讓你看看。但隨意直接看看網站，它可能會幫助更多的視覺效果來了解菜單。 http://www.adrenalizegaming.com

目前它漂浮在左邊...我在想它與內嵌塊有什麼關係？

相關HTML：

<div id="header"> 
<ul id="menu"> 
<li><a href="#">Meet the teams</a> 
<ul class="menu1"><li><a href="../white.php">Adrenalize White</a></li> 
<li><a href="../black.php">Adrenalize Black</a></li> 
</ul> 
</li> 
<li><a href="../index.php" id="logo" title="index"><span>index</span></a></li> 
<li><a href="../community/"><span class="community">community</span></a> 
</ul> 
</div> 

所有相關的CSS：

#header img{ 
max-width:100%; 
margin: 0; 
vertical-align: middle; 
} 
#header { 
z-index: 99; 
color: #FFF; 
background-color: #000; 
padding: 10px; 
display: inline-block; 
vertical-align: middle; 
margin: 0 auto; 
-webkit-box-shadow: 0px 10px 10px rgba(50, 50, 50, 0.7); 
-moz-box-shadow: 0px 10px 10px rgba(50, 50, 50, 0.7); 
box-shadow:   0px 10px 10px rgba(50, 50, 50, 0.7); 
} 

#header a:link { 
font-size: 1.8em; 
text-decoration: none; 
font-family: coolvetica,helvetica,tahoma; 
text-transform: uppercase; 
vertical-align: middle; 
color: #1bc7ff; 
padding: 0 20px 0 20px; 
} 

#menu { 
padding:0; 
margin: 0 auto; 
} 
#menu ul{ 
display: inline-block; 
margin: 0; 
padding: 0; 
border: none; 
outline: none; 
} 

#menu li { 
position: relative; 
list-style: none; 
display: inline-block; 
} 

#menu ul { 
position: absolute; 
top: 40px; 
left: 0; 
opacity: 0; 
background-color: #000; 
background: rgba(0, 0, 0, 0.6); 
-webkit-transition: opacity .25s ease .1s; 
-moz-transition: opacity .25s ease .1s; 
-o-transition: opacity .25s ease .1s; 
-ms-transition: opacity .25s ease .1s; 
transition: opacity .25s ease .1s; 
border-bottom-left-radius: 10px; 
border-bottom-right-radius: 10px; 
} 

#menu li:hover > ul { opacity: 1; } 

#menu ul li { 
height: 0; 
overflow: hidden; 
padding: 0; 
width: 100%; 
-webkit-transition: height .25s ease .1s; 
-moz-transition: height .25s ease .1s; 
-o-transition: height .25s ease .1s; 
-ms-transition: height .25s ease .1s; 
transition: height .25s ease .1s; 

} 

#menu li:hover > ul li { 
height: 40px; 
overflow: visible; 
padding: 0; 
} 

#menu ul li a { 
overflow: hidden; 
width: 350px; 
margin: 0; 
border: none; 
display: inline-block; 
border-bottom: 1px solid #353539; 
} 

#menu ul li:last-child a { border: none; } 

Answer 1

爲了將菜單頁面的中心，只需修改你的CSS如下：

menu { 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    text-align: center; 
} 

您可以將position: fixed;添加到#header以保持其固定在滾動時頂部。不太確定，但如果這是你想要的。