Центр Навигационная панель с логотипом посередине

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, чтобы сохранить его на сверху при прокрутке. Не совсем уверен, если это то, что вы хотите.