列表項目不在div中心

A不想爲菜單列表項目創建單獨的div。只要堅持李。但他們繼續堅持右上方。列表項目不在div中心

我該如何中心#menuTop列表？

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>

來源

2014-10-20 Roland Jegorov

你的問題實在是不清楚，你有什麼期待？ – Haris 2014-10-20 15:24:15

嘗試在menuTop：float：left;並刪除位置絕對 – Mimouni 2014-10-20 15:27:00

http://codepen.io/jonigiuro/pen/JlwAg這似乎工作 – 2014-10-20 15:31:33

從刪除text-align: right：

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

codepen

來源

2014-10-20 15:29:51

刪除：

position: absolute; 
margin-left: 500px;

從#menuTop：

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

而且，如果要居中的菜單項，補充一點：

#menuTop ul { 
    text-align: center; 
}

來源

2014-10-20 15:27:33 LorDex

如果#menutop是一個孩子一個主要的div的div，你應該把它寫到主di的css中五：

#main_div {position:relative;}

這對於#menutop：

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

來源

2014-10-20 15:32:26 IVIajid

列表項目不在div中心

回答

相關問題