Html 在 DIV 内水平居中 UL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6793230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontally Centre a UL inside a DIV
提问by
I have a divwith a ulinside, I want to center the ulhorizontally of the screen.
我有div一个ul里面，我想中间ul水平的画面。
The full code of the project can be found here: jsfiddle
该项目的完整代码可以在这里找到：jsfiddle
I have tried using:
我试过使用：
margin: 0 auto; /* After setting the width of course */
text-align: center; /* Ran out of ideas!! */
I also tried relative positioning and setting % instead of px, but this doesnt give me exact centre of the screen, and also, if I added more items to the menu, it would'nt be center after including them items (using a %).
我也尝试过相对定位和设置 % 而不是 px，但这并没有给我屏幕的确切中心，而且，如果我向菜单中添加了更多项目，在包含项目后它不会居中（使用 %） .
My FULL code is in jsfiddlefor all you to tinker with.
我的完整代码在jsfiddle 中，供您修改。
I have pasted some of the (what I think is) relevant code below for your convenience:
为了您的方便，我在下面粘贴了一些（我认为是）相关代码：
CSS:
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:
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>
So basically, I want to center the #nav which is contained within the #navbar, which is contained within the #header.所以基本上，我想将#navbar 中包含的#nav 居中，#navbar 包含在#header 中。
采纳答案by erichert
Adding text-align:centerto the #navbardiv should do it because your list is inline-block.
添加text-align:center到#navbardiv 应该这样做，因为您的列表是inline-block.
You'll have to remove the left:10%if you want it centered.
left:10%如果你想让它居中，你必须删除它。
回答by Johan
Here you go: http://jsfiddle.net/gzB6a/I added
给你：http: //jsfiddle.net/gzB6a/我加了
div#navbar {
text-align: center;
}
And removed
并删除
the ul#nav { left: 5%; }
