Question

目前我所拥有的是一个包含导航栏的div，我想要的是将导航栏放在屏幕中间的te顶部;不管它的分辨率是多少？

<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 code

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

Answer 1

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

请参阅this fiddle

Answer 2

您可以使用css属性margin:auto

这是一个小提琴

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

将此div对齐在屏幕顶部的中心？

2 个答案: