0

我不能为我的生活弄清楚这一点。我已经制作了一个列表，并正在使用它来创建一个基于图像的精灵导航器。我已经完成了所有悬停效果并显示了它，但无论我尝试什么，我都无法让它与页面中心对齐。HTML：

<body>
    <div id = 'logo'></div>




    <ul id="navbar">
        <li id="nav-bio"><a href="#">Bio</a></li>
        <li id="nav-music"><a href="#">Music</a></li>
        <li id="nav-video"><a href="#">Video</a></li>
        <li id="nav-press"><a href="#">Press</a></li>
        <li id="nav-shows"><a href="#">Shows</a></li>
        <li id="nav-shop"><a href="#">Shop</a></li>
    </ul>


    <div class = 'wrapper'>

    <div id = 'blog'>

    </div>

    </div>

</body>

CSS：

 #logo{
    width: 100%;
    height: 190px;
    background:url('Loons-Title.png');
     background-position:center top ;
    background-size:contain;
    background-repeat:no-repeat;
    }

div.wrapper{
    width: 100%;
    height: 5000px;
    margin-left: 0%;
    margin-right: 10%;
    }

#navbar {
    height: 65px;
    width: 700px;
    list-style:none;
    padding: 0;
    margin:0;
    overflow: hidden;
}

#navbar li {
    float: left;
}
#navbar a {
    display: block;

    padding-top: 66px;
    text-decoration: none;
}

#nav-bio { width: 79px;
    background-image: url(Loons-menu-sprite.png);
}
#nav-bio:hover {
    width: 79px;
    background-position: 0px -66px;
}
#nav-music { width: 137px;
    background-image: url(Loons-menu-sprite.png);
    background-position: -79px 0px;}
#nav-music:hover {
    width: 137px;
    background-position: -79px -66px;
}
#nav-video {
    width: 121px;
    background-image: url(Loons-menu-sprite.png);
    background-position: -216px 0px;
 }
#nav-video:hover {
    width: 121px;
    background-position: -216px -66px;
}
#nav-press {
    width: 140px;
    background-image: url(Loons-menu-sprite.png);
    background-position: -337px 0px;
 }
 #nav-press:hover {
    width: 140px;
    background-position: -337px -66px;
}
#nav-shows {
    width: 129px;
    background-image: url(Loons-menu-sprite.png);
    background-position: -477px 0px;
}
#nav-shows:hover {
    width: 129px;
    background-position: -477px -66px;
}
#nav-shop {
    width: 94px;
    background-image: url(Loons-menu-sprite.png);
    background-position: -606px 0px;
 }
 #nav-shop:hover {
    width: 94px;
    background-position: -606px -66px;
}
4

1 回答 1

1 
#navbar {
    height: 65px;
    width: 700px;
    list-style:none;
    padding: 0;
    margin:0 auto; /* change */
    overflow: hidden;
}
于 2012-05-17T20:18:32.757 回答