列表项目不在div中心

Question

A不想为菜单列表项目创建单独的div。只要坚持李。但他们继续坚持右上方。

我该如何中心#menuTop列表？

守则 - 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

删除：

position: absolute; 
margin-left: 500px; 

从#menuTop：

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

而且，如果要居中的菜单项，补充一点：

#menuTop ul { 
    text-align: center; 
} 

Answer 3

如果#menutop是一个孩子一个主要的div的div，你应该把它写到主di的css中五：

#main_div {position:relative;} 

这对于#menutop：

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