960グリッド内の中央メニュー

Question

私は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"); 
    }); 
}); 

Answer 1

メニューをコンテナにラップし、position: relativeに設定します。次に、#menuを左から50％、絶対margin-left: -(outerWidth/2)の位置に配置します。

このような何かが動作するはずです：

<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) 
}); 

Answer 2

だけ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 */ 
}