边距自动不居中

提问者：小点点

我不知道为什么我的页边距自动没有居中，它最终在页脚是摇摇晃晃的，谁能给我解释一下为什么。

null

body {
  background-color: #32a893;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.footer {
  width: 100vw;
  display: block;
  overflow: hidden;
  padding: 5px 0;
  box-sizing: border-box;
  background-color: #18181a;
}

.inner_footer {
  height: 100%;
  display: block;
  margin: auto;
  width: 50%;
}

.inner_footer .footer_second {
  width: calc (10% - 20px);
  margin-right: 100px;
  float: left;
  height: 100%;
}

.inner_footer .footer_second:last-child {
  margin-right: 0;
}

.inner_footer .footer_second h1 {
  font-family: 'arial';
  font-size: 22px;
  color: white;
  display: block;
  width: 100% margin-bottom: 20px;
}

.inner_footer .footer_second a {
  font-family: 'arial';
  font-size: 18px;
  color: white;
  font-weight: 200;
  display: block;
  width: 100% margin-bottom: 1px
}

#header {
  text-align: center;
  color: #000000;
  font-size: 40px;
}

#nav {
  background-color: #000000;
  overflow: hidden;
  text-align: center;
  font-style: 'arial';
}

#nav a {
  float: left;
  color: #FFFDDB;
  text-align: right;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
  font-style: 'arial';
}

.fourColumnImage {
  float: left;
  width: 100%;
  height: 100px;
  padding: 55px;
  margin: 100px;
  color: black: border: solid;
}

.fourColumnDiv {
  float: left;
  width: 50%;
  height: 300px;
  padding: 5px;
  margin: 10px;
  color: purple: border: solid;
}

.threeColumnContent {
  font-size: 12px;
  color: White;
  font-style: 'calibri';
}

.threeColumnDiv {
  float: left;
  width: 40%;
  height: 400px;
  padding: 20px;
  margin: 40px;
  border: solid;
  font-size: 22px;
  color: black;
  font-style: 'calibri';
}

.threeColumnImage {
  float: left;
  width: 50%;
  height: 300px;
  padding: 5px;
  margin: 10px;
}

#middleDiv {
  background-color: #FFFDDB;
}

.text {
  text-align: center;
  color: #000000;
}

.footerText {
  text-align: center;
  color: #000000;
  font-size: 30px;
  padding: 10px;
  float: left;
}

<html>
<img src="">

<head>
  <meta charset="utf-8">
  <title> Sneakers & Kicks </title>
  <link rel="stylesheet" Type="text/css" href="assignment1.css" />
</head>

<body>
  <div id="header">
    <h1> Homepage</h1>
  </div>

  <div id="nav">
    <a href="Homepage">Homepage</a>
    <a href="Sneakers & Kicks.html">Sneakers & Kicks</a> -->
    <a href="About Us">About Us</a>
    <a href="Contact Us">Contact Us</a>
  </div>


  <div id="threeColumnContent">
    <div id="lefDiv" class="threeColumnDiv">
      <img src="shoe.jpg" class="threeColumnImage">
      <p> These shoes are known as the Adidas Yeezys they are one of the most expensive trainers in the world.Adidas has collaborated with the American designer and famous perosnality known as Kanye West.These shoes are very limited due to the fact that Kanye
        west had an involvement witht hese shoes so they are a big hit in the trainers department. </p>
    </div>

    <div id="middleDiv" class="threeColumnDiv">
      <img src="airmax.jpg" class="threeColumnImage">
      <p> This is another popular shoe also known as the Nike Air Max 97s.This helps with balance as it has inflated soles which make it easier to do excercise in so is highly recommended for teenagers.Furthermore, these trainers were inspired by the bullet
        trains in japan so is thouroghly recommended for young teenagers for the too cool for school look. </p>
    </div>

    <div class="footer">
      <div class="inner_footer">

        <div class="footer_second">
          <h1>About us</h1>
          <a href="#">Terms &amp; Conditions</a>
          <a href="#">privacy policy</a>
        </div>

        <div class="footer">
          <div class="inner_footer">

            <div class="footer_second">
              <h1>Contact Us</h1>
              <a href="#">Phone Number</a>
              <a href="#">Email</a>
            </div>

            <div class="footer">
              <div class="inner_footer">

                <div class="footer_second">
                  <h1>Help</h1>
                  <a href="#">FAQ</a>

                </div>





</body>

</html>

null

共2个答案

匿名用户

您多次打开页脚标记，而没有关闭它们。看看我下面的版本，它应该做你想做的。我擦除了其中的一些标记，关闭了其他标记，将display:flex和justify-content:center应用于.footer以使我擦除的CSS设置的inner_footer居中：

null

body {
  background-color: #32a893;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.footer {
  width: 100vw;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 5px 0;
  box-sizing: border-box;
  background-color: #18181a;
}

.inner_footer {

}

.inner_footer .footer_second {
  width: calc (10% - 20px);
  margin-right: 100px;
  float: left;
  height: 100%;
}

.inner_footer .footer_second:last-child {
  margin-right: 0;
}

.inner_footer .footer_second h1 {
  font-family: 'arial';
  font-size: 22px;
  color: white;
  display: block;
  width: 100% margin-bottom: 20px;
}

.inner_footer .footer_second a {
  font-family: 'arial';
  font-size: 18px;
  color: white;
  font-weight: 200;
  display: block;
  width: 100% margin-bottom: 1px
}

#header {
  text-align: center;
  color: #000000;
  font-size: 40px;
}

#nav {
  background-color: #000000;
  overflow: hidden;
  text-align: center;
  font-style: 'arial';
}

#nav a {
  float: left;
  color: #FFFDDB;
  text-align: right;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
  font-style: 'arial';
}

.fourColumnImage {
  float: left;
  width: 100%;
  height: 100px;
  padding: 55px;
  margin: 100px;
  color: black: border: solid;
}

.fourColumnDiv {
  float: left;
  width: 50%;
  height: 300px;
  padding: 5px;
  margin: 10px;
  color: purple: border: solid;
}

.threeColumnContent {
  font-size: 12px;
  color: White;
  font-style: 'calibri';
}

.threeColumnDiv {
  float: left;
  width: 40%;
  height: 400px;
  padding: 20px;
  margin: 40px;
  border: solid;
  font-size: 22px;
  color: black;
  font-style: 'calibri';
}

.threeColumnImage {
  float: left;
  width: 50%;
  height: 300px;
  padding: 5px;
  margin: 10px;
}

#middleDiv {
  background-color: #FFFDDB;
}

.text {
  text-align: center;
  color: #000000;
}

.footerText {
  text-align: center;
  color: #000000;
  font-size: 30px;
  padding: 10px;
  float: left;
}

<html>
<img src="">

<head>
  <meta charset="utf-8">
  <title> Sneakers & Kicks </title>
  <link rel="stylesheet" Type="text/css" href="assignment1.css" />
</head>

<body>
  <div id="header">
    <h1> Homepage</h1>
  </div>

  <div id="nav">
    <a href="Homepage">Homepage</a>
    <a href="Sneakers & Kicks.html">Sneakers & Kicks</a> -->
    <a href="About Us">About Us</a>
    <a href="Contact Us">Contact Us</a>
  </div>


  <div id="threeColumnContent">
    <div id="lefDiv" class="threeColumnDiv">
      <img src="shoe.jpg" class="threeColumnImage">
      <p> These shoes are known as the Adidas Yeezys they are one of the most expensive trainers in the world.Adidas has collaborated with the American designer and famous perosnality known as Kanye West.These shoes are very limited due to the fact that Kanye
        west had an involvement witht hese shoes so they are a big hit in the trainers department. </p>
    </div>

    <div id="middleDiv" class="threeColumnDiv">
      <img src="airmax.jpg" class="threeColumnImage">
      <p> This is another popular shoe also known as the Nike Air Max 97s.This helps with balance as it has inflated soles which make it easier to do excercise in so is highly recommended for teenagers.Furthermore, these trainers were inspired by the bullet
        trains in japan so is thouroghly recommended for young teenagers for the too cool for school look. </p>
    </div>

    <div class="footer">
      <div class="inner_footer">

        <div class="footer_second">
          <h1>About us</h1>
          <a href="#">Terms &amp; Conditions</a>
          <a href="#">privacy policy</a>
        </div>

        <div class="footer_second">
          <h1>Contact Us</h1>
          <a href="#">Phone Number</a>
          <a href="#">Email</a>
        </div>

        <div class="footer_second">
          <h1>Help</h1>
          <a href="#">FAQ</a>

        </div>

      </div>
    </div>




</body>

</html>

匿名用户

我们都同意，如果你说BLA BLA BLA，我们会发现更多关于你的代码....！

但是如何让Div中心化呢？两种方式

使用文本-Align：Center；
使用显示：Flex；justify-content：Center；
- 或者可以添加align-items：center；所以它完全居中

边距自动不居中

共2个答案

相关问题

热门标签

边距自动不居中

共2个答案

相关问题

热门标签

微信关注