중앙에 로고가있는 가운데 탐색 모음

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 :

다음과 같이 당신의 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

:

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

#header에 position: fixed;을 추가하여 스크롤 할 때 맨 위. 확실하지는 않지만, 이것이 당신이 원하는 것이라면.