[英]Horizontally Centre a UL inside a DIV
我有一个内部有ul
的div
,我想将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>
将text-align:center
添加到#navbar
div 应该这样做,因为您的列表是inline-block
。
如果你想让它居中,你必须删除left:10%
。
你在这里 go: http://jsfiddle.net/gzB6a/我加了
div#navbar {
text-align: center;
}
并删除
the ul#nav { left: 5%; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.