问题：

边距自动不居中

翟嘉祥

2023-03-14

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

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 prettyprint-override"><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个答案

公西岳

2023-03-14

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

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

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

张智

2023-03-14

您多次打开页脚标记，而没有关闭它们。看看我下面的版本，它应该做你想做的。我擦除了其中的一些标记，关闭了其他标记，将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>

类似资料：

为什么不设置边距：将图片自动居中？

问题内容： Test 在100％扩展，因为它应该，但图像没有中心本身。为什么？问题答案：因为您的图片是[inline-block元素。您可以将其更改为如下所示的块级元素：它将居中。
CSS内边距

主要内容：定义各个方向上的内边距,内边距简写形式内边距（padding）是指元素内容区与边框之间的区域，与外边距不同，内边距会受到背景属性的影响。您可以通过下面的属性来设置元素内边距的尺寸： padding-top：设置元素内容区上方的内边距； padding-right：设置元素内容区右侧的内边距； padding-bottom：设置元素内容区下方的内边距； padding-left：设置元素内容区左侧的内边距； padding：内边距属性的
CSS外边距

主要内容：为元素设置外边距,外边距折叠元素的外边距（margin）是围绕在元素边框以外（不包括边框）的空白区域，这片区域不受 background 属性的影响，始终是透明的。为元素设置外边距默认情况下如果不设置外边距属性，HTML 元素就是不会有外边距，但也有例外的情况，因为浏览器会为一些 HTML 元素设置默认的外边距，例如元素。您可以使用下面的属性来为 HTML 元素设置外边距： margin-top：设置元素上方的外边距；
HTML--左边距

我使用flexbox在桌面窗口屏幕中布局我的index.html，在一行中有两个div元素，在第二行中有一个长div元素，在第三行中有两个div元素，其中一个包含一个列表。我需要第一行和第三行中两个div元素之间的一些行间距。当我尝试在div元素上使用左边缘或右边缘时，div元素会相互折叠。我试图改变每个div元素的宽度，但它们最终会互相折叠。我还尝试了在内容类上证明内容和对齐内容，但没有任何结
Xamarin表边距
4.3 外边距

外边距会在元素外创建额外的空白区域，这个区域不能放置其他元素。因此，大多数情况下，普通流中都是通过外边距来控制元素之间的距离，使元素间出现间隔。外边距默认是透明的，在这个区域中可以看到父元素的背景。也不能通过任何属性，来为外边距设置颜色，或让其不透明。但是，可以通过 margin属性来设置外边距的宽度，其值可以是百分比、长度值、或 auto。由于外边距也是可选的，默认值是 0。所以，如果没有显

边距自动不居中

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档