css – 在DIV内水平居中UL

我有一个内部有一个ul的div,我想把屏幕的水平居中.

该项目的完整代码可以在这里找到：jsfiddle

我试过用过：

margin: 0 auto; /* After setting the width of course */
text-align: center; /* Ran out of ideas!! */

我也试过相对定位和设置％而不是px,但是这并不能给我确切的屏幕中心,而且,如果我在菜单中添加了更多项目,那么在包含它们之后它就不会是中心(使用％) .

我的完整代码是在jsfiddle,所有你修补.

为方便起见,我贴了一些(我认为的)相关代码：

CSS：

/* Main*/
ul#nav { 
display: inline-block;
padding: 0px; 
list-style-type: none; 
white-space: Nowrap;
position: relative;
top: 10px;
left: 10%; /* This is what im currently using,but as thought,it doesnt work as needed :(*/
border: 2px solid chocolate;
-moz-border-radius: 10px; /* Border Radius for Mozilla Firefox */
border-radius: 10px;      /* Border Radius for everything else*/
}

ul#nav li { 
float: left; 
font-family: 'Myraid Pro',Arial,Helvetica,sans-serif;  /*Use available font for menu */
font-weight: bold; 
margin: 0; 
padding: 5px 0 4px 0; 
background-color: #ee8043; /*Background Colour for the <li>*/
padding: 5px;              /* Padding for the LI */
-moz-border-radius: 8px; /* Border Radius for Mozilla Firefox */
border-radius: 8px;      /* Border Radius for everything else*/

}

HTML：

<div id="header">
        <a href="index.html"><img id="logo" src="images/Dafne_logo.png"/></a>

        <div id="navbar">
            <ul id="nav">
                <li><a href="index.html" rel="home">Home</a></li>
                <li class="menu_separator">|</li>
                <li><a href="index.html">News</a></li>
                <li class="menu_separator">|</li>
                <li><a href="forums.html">Forums</a></li>
                <li class="menu_separator">|</li>
                <li><a href="signup4327.html?to=%252F">Signup</a></li>
                <li class="menu_separator">|</li>
                <li><a href="login4327.html?to=%252F">Login</a></li>
                <li class="menu_separator">|</li>
            </ul>
        </div>

    </div>

    <div id="coloured_bar"></div>

基本上,我想将#nav放在#navbar中,#navbar包含在#header中.

解决方法

添加text-align：center到#navbar div应该这样做,因为你的列表是inline-block.

如果你想让它居中,你必须删除左边：10％.

原文地址：https://www.jb51.cc/css/215030.html