页面不会居中

时间：2017-03-08 23:51:05

标签： html css centering

我尝试过包装页面并将页边距设置为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>

展开代码段，你会看到它是如何贴在左边的。如果我将该位置设置为相对位置，则导航栏将不会保持固定在顶部。

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

您必须为外部包装元素设置width 和 position property才能实现中心;以及您的margin: 0 auto;

ie。 

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

希望这有帮助！

相关问题
最新问题