Question

A不想为菜单列表项创建单独的div。只要坚持使用LI。但他们一直坚持正确的顶端。

如何将#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>

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的css：

#main_div {position:relative;}

和#menut：

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

列表项目不以div为中心

3 个答案: