2017-03-08 63 views
0

我试过包裹我的页面,并将margin设置为0,宽度设置为960px,但没有任何效果。页面不会中心

body { 
 
    background-image: url('http://wallpapercave.com/wp/adsKXLw.png'); 
 
    background-repeat: no-repeat; 
 
    overflow: scroll; 
 
    background-size: cover; 
 
    height: 100%; 
 
} 
 

 
#everything { 
 
    margin: 0 auto; 
 
    width: 960px; 
 
} 
 

 
#huge { 
 
    width: 900px; 
 
    height: 100%; 
 
    position: absolute; 
 
    background-color: rgba(255, 103, 48, 0.5); 
 
    left: 75px; 
 
    top: 0%; 
 
} 
 

 
.navbar div, .navbar div p { 
 
    position: fixed; 
 
} 
 

 
#navbar-background { 
 
    width: 820px; 
 
    height: 110px; 
 
    border-radius: 70px; 
 
    top: 11px; 
 
    left: 115px; 
 
    background-color: rgba(255,255,255, .2); 
 
    z-index: 1 
 
} 
 

 
#home-div { 
 
    background-color: rgb(249, 162, 100); 
 
    width: 210px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    position: fixed; 
 
    left: 135px; 
 
    top: 30px; 
 
    z-index: 2; 
 
    border-top: 1px white solid; 
 
    border-left: 1px solid white 
 
} 
 

 
#home-div-button { 
 
    background-color: rgb(200, 131, 78); 
 
    width: 215px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    z-index: 1; 
 
    top: 40px; 
 
    left: 140px; 
 
    position: fixed; 
 
} 
 

 
#home-text { 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    top: 10px; 
 
    left: 145px; 
 
    font-size: 30px; 
 
    color: #FFFFFF; 
 
} 
 

 

 

 
#clan-div { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 505px; 
 
    top: 40px; 
 
    position: fixed; 
 
    border-radius: 10px 0px 0px 10px; 
 
} 
 

 
#clan-text { 
 
    left: 512px; 
 
    top: 35px; 
 
    font-size: 14px; 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
} 
 

 
#clan-div-2 { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 597px; 
 
    top: 40px; 
 
    position: fixed; 
 
    border-radius: 0px 10px 10px 0px; 
 
} 
 

 
#clan-text-2 { 
 
    left: 610px; 
 
    top: 35px; 
 
    font-size: 14px; 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
} 
 

 
#games-div { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 712px; 
 
    top: 40px; 
 
    position: fixed; 
 
    border-radius: 10px; 
 
} 
 

 
#games-text { 
 
    font-size: 20px; 
 
    font-family: Comfortaa; 
 
    color: #FFFFFF; 
 
    top: 35px; 
 
    left: 723px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
 
    <link href="style.css" rel="stylesheet" text="text/css"> 
 
    <link href="script-1.js" type="text/javascript"> 
 
    </head> 
 
    <body> 
 
    <div id="everything"> 
 
     <div id="huge"></div> 
 
     <div class="navbar"> 
 

 
     <div id="navbar-background"></div> 
 

 
     <div id="home-div"> 
 
      <p id="home-text"></p> 
 
     </div> 
 

 
     <div id="home-div-button"></div> 
 

 
     <div id="clan-div"> 
 
      <p id="clan-text"></p> 
 
     </div> 
 

 
     <div id="clan-div-2"> 
 
      <p id="clan-text-2"></p> 
 
     </div> 
 

 
     <div id="games-div"> 
 
      <p id="games-text"></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

展开的片断,你会看到它是如何坚持到左边。如果我将位置设置为相对位置,那么导航栏不会保持固定在顶部。

回答

1

我强烈建议阅读不同定位类型的确切方式,以及它们如何影响儿童。我已经实现了我在下面的代码片段中所期望的行为,主要更改是给出最低高度#everything,并将容器作为背景使用而不是单独的div。确保你将它与你的代码进行比较,如果你有任何问题,请不要犹豫,放弃评论。

body { 
 
    background-image: url('http://wallpapercave.com/wp/adsKXLw.png'); 
 
    background-repeat: no-repeat; 
 
    overflow: scroll; 
 
    background-size: cover; 
 
    height: 100%; 
 
} 
 

 
#everything { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 960px; 
 
    min-height: 100vh; 
 
    background-color: rgba(255, 103, 48, 0.5); 
 
} 
 

 
#huge { 
 
    width: 900px; 
 
    height: 100%; 
 
    position: absolute; 
 
    background-color: rgba(255, 103, 48, 0.5); 
 
    left: 75px; 
 
    top: 0%; 
 
} 
 

 
.navbar { 
 
    position: fixed; 
 
    width: 960px; 
 
    height: 110px; 
 
    background-color: rgba(255,255,255, .2); 
 
    border-radius: 70px; 
 
} 
 

 
#home-div { 
 
    background-color: rgb(249, 162, 100); 
 
    width: 210px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    position: absolute; 
 
    left: 135px; 
 
    top: 22px; 
 
    z-index: 2; 
 
    border-top: 1px white solid; 
 
    border-left: 1px solid white 
 
} 
 

 
#home-div-button { 
 
    background-color: rgb(200, 131, 78); 
 
    width: 215px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    z-index: 1; 
 
    top: 32px; 
 
    left: 140px; 
 
    position: absolute; 
 
} 
 

 
#home-text { 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    top: 10px; 
 
    left: 145px; 
 
    font-size: 30px; 
 
    color: #FFFFFF; 
 
} 
 

 

 

 
#clan-div { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 505px; 
 
    top: 32px; 
 
    position: absolute; 
 
    border-radius: 10px 0px 0px 10px; 
 
} 
 

 
#clan-text { 
 
    left: 512px; 
 
    top: 35px; 
 
    font-size: 14px; 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
} 
 

 
#clan-div-2 { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 597px; 
 
    top: 32px; 
 
    position: absolute; 
 
    border-radius: 0px 10px 10px 0px; 
 
} 
 

 
#clan-text-2 { 
 
    left: 610px; 
 
    top: 35px; 
 
    font-size: 14px; 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
} 
 

 
#games-div { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 712px; 
 
    top: 32px; 
 
    position: absolute; 
 
    border-radius: 10px; 
 
} 
 

 
#games-text { 
 
    font-size: 20px; 
 
    font-family: Comfortaa; 
 
    color: #FFFFFF; 
 
    top: 35px; 
 
    left: 723px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
 
    <link href="style.css" rel="stylesheet" text="text/css"> 
 
    <link href="script-1.js" type="text/javascript"> 
 
    </head> 
 
    <body> 
 
    <div id="everything"> 
 
     <div class="navbar"> 
 
     <div id="home-div"> 
 
      <p id="home-text"></p> 
 
     </div> 
 

 
     <div id="home-div-button"></div> 
 

 
     <div id="clan-div"> 
 
      <p id="clan-text"></p> 
 
     </div> 
 

 
     <div id="clan-div-2"> 
 
      <p id="clan-text-2"></p> 
 
     </div> 
 

 
     <div id="games-div"> 
 
      <p id="games-text"></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

+0

谢谢!我真的不明白你做了什么,为什么它有帮助。是否有您更改的特定属性? – BOBONA

+0

另外,我不知道如何让导航栏不占用#huge的整个长度并以此为中心。我试着让.nav有一个较短的宽度,然后使用left:100px,但当我放大或缩小浏览器时,它会停止正确缩放。 – BOBONA

0

你必须同时设置width一个positionproperty包裹元素以实现中心;以及您的margin: 0 auto;

即。

.pagewrap { 
    width: 960px; 
    position: relative; 
    margin: 0 auto; 
    height: auto; 
} 

希望这会有所帮助!