我一直在研究960网格,(http://960.gs/)我使用过几年前用过的旧式菜单,出于某种原因,960网格,菜单向左浮动,我希望它居中。
ul#menu {
width:940px;
height:61px;
background: url(../images/menu_bg.png) no-repeat;
list-style:none;
padding-top:0;
padding-left:0;
margin: 0;
}
ul#menu li {
float:left;
}
ul#menu li a {
background: url(../images/menu_splice_color.png) no-repeat scroll top left;
display:block;
height:61px;
position:relative;
}
ul#menu li a.shel {
width:135px;
}
ul#menu li a.golf {
width:84px;
background-position:-135px 0px;
}
ul#menu li a.pro {
width:119px;
background-position:-219px 0px;
}
ul#menu li a.event {
width:94px;
background-position:-338px 0px;
}
ul#menu li a.member {
width:148px;
background-position:-432px 0px;
}
ul#menu li a.bistro {
width:91px;
background-position:-580px 0px;
}
ul#menu li a.contact {
width:115px;
background-position:-671px 0px;
}
ul#menu li a span {
background: url(../images/menu_splice_color.png) no-repeat scroll bottom left;
display:block;
position:absolute;
top:0;
left:0px;
height:100%;
width:100%;
z-index:100;
}
ul#menu li a.shel span {
background-position:0px -61px;
}
ul#menu li a.golf span {
background-position:-135px -61px;
}
ul#menu li a.pro span {
background-position:-219px -61px;
}
ul#menu li a.events span {
background-position:-338px -61px;
}
ul#menu li a.member span {
background-position:-432px -61px;
}
ul#menu li a.bistro span {
background-position:-580px -61px;
}
ul#menu li a.contact span {
background-position:-672px -61px;
}
我的通用html标记是
<div class="container_16">
<!-- Navigation Start -->
<div class="grid_16">
<ul id="menu">
<li><a href="#" class="shel"><span></span></a></li>
<li><a href="#" class="golf"><span></span></a></li>
<li><a href="#" class="pro"><span></span></a></li>
<li><a href="#" class="events"><span></span></a></li>
<li><a href="#" class="member"><span></span></a></li>
<li><a href="#" class="bistro"><span></span></a></li>
<li><a href="#" class="contact"><span></span></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
我使用jquery动画来翻转图像。
$(function() {
$("ul#menu span").css("opacity","0");
$("ul#menu span").hover(function () {
$(this).stop().animate({
opacity: 1
}, "slow");
},
function () {
$(this).stop().animate({
opacity: 0
}, "slow");
});
});
答案 0 :(得分:1)
将菜单包装在容器中并将其设置为position: relative
。然后将#menu
从左侧和margin-left: -(outerWidth/2)
绝对定位在50%。
这样的事情应该有效:
<nav id="container">
<ul id="menu">
...
</ul>
</nav>
的CSS:
#container { position: relative; }
JQ:
var $menu = $('#menu'),
menuWidth = $menu.outerWidth();
$menu.css({
position: 'absolute',
left: '50%',
margin-left: -(menuWidth/2)
});
答案 1 :(得分:0)
只需将菜单项定义为display:inline-block
,而不是将它们浮动到左侧,并通过将text-align:center
属性提供给菜单的容器来将它们与中心对齐,如下所示:
<强> CSS 强>
.container_16 {
text-align: center;
}
ul#menu li {
display: inline-block;
*display:inline; /* ie7 hack, since it doesn't support inline-block */
}