html - 我布局中的这些 div 不会居中。我什么都试过了

我的 CSS 很烂，这很有趣。

我正在尝试通过复制网页来学习，但这对我来说并没有发生。这三天我试了7次都删了，但这次离我想要的太近了，我删不掉了。

我只是设置布局(在内部元素之前)，这对我来说是最难的部分。

这是我目前所拥有的:

.bod1 {
  margin: auto;
  width: 40%;
  height: 700px;
  background-color: red;
  display: block;
  float: left;
}
.bod2 {
  margin: auto;
  width: 20%;
  height: 700px;
  background-color: green;
  display: block;
}
.foot {
  margin:auto;
  width: 60%;
  height: 340px;
  background-color: blue;
  display: block;
}
#logo {
  display: block;
  float: left;
  height: 81px;
  width: 194px;
  margin-top: 80px;
}

#tabs {
  display: inline-block;
  padding-top: 80px;
  margin-right: 25px;
  float: right;
  color: black;
}
#tabs li {
  display: inline;
}

  


<body>
  <div class="head">
    <div id="logo">
      <a href="#"><img src="https://images.mint.com/web-client/images/mint_logo.png" alt="Mint logo" /></a>
    </div>
    <div id="tabs">
      <ul>
        <li>Sign up</li>
        <li>Log in</li>
      </ul>
    </div>
  </div> 
  <div class="bod1">
    <h1></h1> 
     </div>
  <div class="bod2"> 
    </div>
   <div class="foot">  
  </div>   
</body>

最佳答案

我想你可以删除float:left;在 class=".bod1"

.head {
  margin: auto;
  margin-top: 10px;
  width: 60%;
  height: 130px;
  background-color: purple;
  display: block;
}
.bod1 {
  margin: auto;
  width: 40%;
  height: 700px;
  background-color: red;
  display: block;
}
.bod2 {
  margin: auto;
  width: 20%;
  height: 700px;
  background-color: green;
  display: block;
}
.foot {
  margin:auto;
  width: 60%;
  height: 340px;
  background-color: blue;
  display: block;
}
#logo {
  display: block;
  float: left;
  height: 81px;
  width: 144px;
  margin-top: 50px;
}
#tabs {
  display: inline-block;
  padding-top: 50px;
  margin-right: 25px;
  float: right;
  color: black;
}
#tabs li {
  display: inline;
}

  <title> Mint > Start Here</title>

<body>
  <div class="head">
    <div id="logo">
      <a href="#"><img src="https://images.mint.com/web-client/images/mint_logo.png" alt="Mint logo" /></a>
    </div>
    <div id="tabs">
      <ul>
        <li>Sign up</li>
        <li>Log in</li>
      </ul>
    </div>
  </div>

  <div class="bod1">
    <h1></h1>
  </div>

  <div class="bod2"></div>
  <div class="foot"></div>

</body>

关于html - 我布局中的这些 div 不会居中。我什么都试过了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41800537/

html - 我布局中的这些 div 不会居中。我什么都试过了

上一篇：css - 隐藏 polymer 元素

下一篇：html - 居中 <div>