css - 将UL在DIV内水平居中

我有一个带有div的ul，我想将ul放在屏幕的水平居中位置。

该元素的完整代码可以在这里找到: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>

因此，基本上，我想将#navbar(包含在#header中)中的#nav居中。

最佳答案

应该将text-align:center添加到#navbar div中，因为您的列表是inline-block。

如果要居中放置，您必须删除left:10%。

关于css - 将UL在DIV内水平居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6793230/