목록 항목 div에 센터가 없습니다

Question

A는 메뉴 목록 항목에 대해 별도의 div를 만들고 싶지 않습니다. 그냥 리로 붙어. 그러나 그들은 계속 오른쪽 상단을 고수하고 있습니다.

# menu 가기 목록을 어떻게 배치합니까?

강령 - http://codepen.io/anon/pen/CBnfs

CSS

#header { 
z-index: 1; 
position: fixed; 
background-color: #FFFFFF; 
width: 98.8%; 
height: 60px; 
margin-top: -10px; 
margin-bottom: 5px; 
display: inline-block; 
} 
#header ul li { 
margin-left:15px; 
margin-top: 5px; 
display:inline-block; 
} 
#menuTop { 
height: 60px; 
width: 500px; 
text-align: center; 
position: absolute; 
margin: 0 auto; 
margin-left: 500px; 
border: 1px solid #000000; 
} 
#menuTop a { 
text-decoration: none; 
color: #000000; 
font-family: Open Sans; 
} 

#menuTop a:hover { 
color: #00c4cc; 
} 
#menuTop ul li { 
margin: 0 auto; 
text-align: center; 
margin-left: 20px 
} 

HTML

<div id="menuTop"> 
      <ul> 
       <li><a href="#eventsImage">EVENTS</a></li> 
       <li><a href="#">NEWS</a></li> 
       <li><a href="#">CONTACTS</a></li> 
      </ul> 
     </div> 

     <ul id="socialIcons"> 
      <li id="facebook"><a id="facebook" href="#"></a></li> 
      <li id="google"><a id="google" href="#"></a></li> 
      <li id="twitter"><a id="twitter" href="#"></a></li> 
     </ul> 
     <a href="#"><img src="logo.jpg" alt="Our logo is here" id="logo"/></a> 
    </div> 

Answer 1

에서 text-align: right을 제거

#header ul { 
    margin: 0 auto; 
    padding-left: 0;/*add also padding left to 0*/ 
    /*text-align: right; remove this*/ 
} 

codepen

Answer 2

제거 : #menuTop에서

position: absolute; 
margin-left: 500px; 

:

당신이 메뉴 아이템을 중심하려는 경우

http://codepen.io/Fowler/pen/JsxmG

또한,이 추가

#menuTop ul { 
    text-align: center; 
} 

Answer 3

#menutop 아이 인 경우 주된 div의 div, 당신은 main di의 css에 이것을 써야한다. V :

#main_div {position:relative;} 

이 #menutop에 대한 :

#menutop {position:absolute; right:50%; margin-right:-250px; top:50%; margin-top:-30px;}