-1

我现在拥有的是一个包含导航栏的 div，我想要的是将导航栏放在屏幕中间的顶部；不管它是什么分辨率？

HTML 代码

<div class="navigation" >
    <ul>
        <li><a href="#"><span>Homepage</span></a></li>
        <li><a href="#"><span>Products and Services</span></a></li>
        <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
</div>

CSS 代码

body { 
    margin:0px;
    padding:0px;
    background-image:url('/img/pattern.jpg');
}

#footer {
     position:absolute;
     bottom:0;
     width:100%;
     height:60px;   /* Height of the footer */
     background:#6cf;
}

#header {
     background-image:url('/img/header_img.png');
     padding:10px;
     height:100px;
}


.navigation {
    background: url(images/navigation.png);
    height: 134px;
    overflow: auto;
    display: block;
    float: left;  
    width: 500px;
}
.navigation * {
    padding:0;
    margin:0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-transform: uppercase;
}
.navigation ul {
    display: block;
    float: left;
    padding: 0px 0 0 0;
    margin: 37px 0 0 20px;
}
.navigation ul li {
    background-color:White;
    list-style: none;
    float: left;
    margin: 0 0 0 5px;
    border-radius: 10px;
}

.navigation ul li a {
    background-image:url(img/navbutton_back.png);
    display: block;
    padding: 0 13px 0 0;
    color: #578ba0;
    text-decoration: none
}
.navigation ul li.selected a,
.navigation ul li.hover a {
    background-image:url(img/navbutton_back.png);
    color: #578ba0;
}

.navigation ul li a span {
    background-image:url(img/navbutton_back.png);
    display: block;
    padding: 15px 10px 10px 23px;
}
.navigation ul li.selected a span,
.navigation ul li.hover a span {
    background-image:url(img/navbutton_back.png);
}
4

2 回答 2

0

您应该float: left;从 .navigation 类中删除并添加margin: 0 auto;到它；

看到这个小提琴

于 2013-05-23T12:25:14.807 回答
0

您可以使用 css 属性margin:auto

这是一个小提琴

http://jsfiddle.net/rlcrews/z28V7/1/

于 2013-05-23T12:25:35.577 回答