css 尝试将元素居中时div中的多余边距

m4pnthwp 于 2023-01-06 发布在其他

关注(0)|答案(4)|浏览(136)

我想把一个div元素居中，但是当我把一个div元素居中的时候，使用justify-content:center;，flex-direction:column;它不会更改为Web浏览器窗口的中心。我曾尝试使用position: fixed;，但也不起作用。当使用Inspect Element检查div元素时，我可以看到div的右侧有多余的边距。使用margin:0px;删除它也不起作用。

.h1{
  color: rgb(0, 238, 255);
  display: flex;
  justify-content: center;
  padding-top: 25px;
}

*{
  margin: 0;
  padding: 0;
  background: rgb(5, 52, 128);
}

#clock{
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.datetime{
  color: #ffffff;
  background-color: rgb(5, 52, 128);
  font-family: "Segoe UI", sans-serif;
  width: 338px;
  padding: 15px 10px;
  border: 3px solid hsl(207, 80%, 52%);
  border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The Digital Time</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1 class="h1">Current Time</h1>

    <!-- digital clock -->
    <div id="clock" class="datetime">
      <div class="date">
        <span id="dayname">Day</span>
        <span id="daynum">Num</span>
        <span id="month">Month</span>
        <span id="year">Year</span>
      </div>
      <div class="time">
        <span id="hour">00</span>:
        <span id="minutes">00</span>:
        <span id="seconds">00</span>
        <span id="period">AM</span>
      </div>
    </div>

  </body>
</html>

css

来源：https://stackoverflow.com/questions/73680213/extra-margin-in-div-when-trying-to-center-the-element

4条答案

按热度按时间

lbsnaicq1#

首先，您没有父容器来保存h1和clock div，在添加div后，请将其宽度设置为100%，以便它可以占据视口的整个宽度，然后您可以根据需要设置flex属性，您可以像这样重写代码

.h1{
  color: rgb(0, 238, 255);
  display: flex;
  justify-content: center;
  padding-top: 25px;
}

*{
  margin: 0;
  padding: 0;
  background: rgb(5, 52, 128);
}

.mainDiv{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#clock{
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*NEW ###########*/
  margin: 0px auto;
  left: 0;
  right: 0;
  /*###############*/
}

.datetime{
  color: #ffffff;
  background-color: rgb(5, 52, 128);
  font-family: "Segoe UI", sans-serif;
  width: 338px;
  padding: 15px 10px;
  border: 3px solid hsl(207, 80%, 52%);
  border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The Digital Time</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="mainDiv">
      <h1 class="h1">Current Time</h1>

    <!-- digital clock -->
      <div id="clock" class="datetime">
        <div class="date">
          <span id="dayname">Day</span>
          <span id="daynum">Num</span>
          <span id="month">Month</span>
          <span id="year">Year</span>
        </div>
        <div class="time">
          <span id="hour">00</span>:
          <span id="minutes">00</span>:
          <span id="seconds">00</span>
          <span id="period">AM</span>
        </div>
      </div>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2023-01-06

kzmpq1sx2#

因为它没有width加上width:100vw&box-sizing:border-box;来包含填充和边距。
对于box-sizing:border-box;，您应该给予以下内容：https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

.h1{
  color: rgb(0, 238, 255);
  display: flex;
  justify-content: center;
  padding-top: 25px;
}

*{
  margin: 0;
  padding: 0;
  background: rgb(5, 52, 128);
  box-sizing:border-box; /*added*/
}

#clock{
  height: 80vh;
  width:100vw;/*added*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.datetime{
  color: #ffffff;
  background-color: rgb(5, 52, 128);
  font-family: "Segoe UI", sans-serif;
  width: 338px;
  padding: 15px 10px;
  border: 3px solid hsl(207, 80%, 52%);
  border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The Digital Time</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1 class="h1">Current Time</h1>

    <!-- digital clock -->
    <div id="clock" class="datetime">
      <div class="date">
        <span id="dayname">Day</span>
        <span id="daynum">Num</span>
        <span id="month">Month</span>
        <span id="year">Year</span>
      </div>
      <div class="time">
        <span id="hour">00</span>:
        <span id="minutes">00</span>:
        <span id="seconds">00</span>
        <span id="period">AM</span>
      </div>
    </div>

  </body>
</html>

赞(0）回复(0）举报 2023-01-06

vawmfj5a3#

您可以添加margin: 0px auto以使时钟水平居中。

.h1{
  color: rgb(0, 238, 255);
  display: flex;
  justify-content: center;
  padding-top: 25px;
}

*{
  margin: 0;
  padding: 0;
  background: rgb(5, 52, 128);
}

#clock{
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*NEW ###########*/
  margin: 0px auto;
  /*###############*/
}

.datetime{
  color: #ffffff;
  background-color: rgb(5, 52, 128);
  font-family: "Segoe UI", sans-serif;
  width: 338px;
  padding: 15px 10px;
  border: 3px solid hsl(207, 80%, 52%);
  border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The Digital Time</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1 class="h1">Current Time</h1>

    <!-- digital clock -->
    <div id="clock" class="datetime">
      <div class="date">
        <span id="dayname">Day</span>
        <span id="daynum">Num</span>
        <span id="month">Month</span>
        <span id="year">Year</span>
      </div>
      <div class="time">
        <span id="hour">00</span>:
        <span id="minutes">00</span>:
        <span id="seconds">00</span>
        <span id="period">AM</span>
      </div>
    </div>

  </body>
</html>

赞(0）回复(0）举报 2023-01-06

mcdcgff04#

.h1{
 color: rgb(0, 238, 25
 display: flex;
 justify-content: center;
 padding-top: 25px;
 }
 
 *{
   margin: 0;
   padding: 0;
   background: rgb(5, 52, 128);
 }
 
 body{
 display:flex;
 flex-direction:column;
 }
 
 
 
 
 .datetime{
   height: 80vh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   color: #ffffff;
   background-color: rgb(5, 52, 128);
   font-family: "Segoe UI", sans-serif;
   width: 338px;
   padding: 15px 10px;
   border: 3px solid hsl(207, 80%, 52%);
   border-radius: 5px;
 align-self:center;
 
 }

你好，
只是在正文中添加了Flex，并将所有样式移到. datetime中。

赞(0）回复(0）举报 2023-01-06

我来回答

css 尝试将元素居中时div中的多余边距

4条答案

相关问题

热门标签

最新问答