为什么这段代码，具有显示弹性，对齐内容中心和对齐项目中心，没有将元素水平和垂直对齐到中心？

问题描述 投票：0回答：1

我正在学习 JS，我所做的任务之一 - 是编写简单的 JS、HTML 和 CSS 导向代码，只是为了帮助我学习 JS 并能够创建某些 JS Web 元素和项目，这样当我觉得我有一个很好的掌握了 JS 以后我可以将它们应用到更大的项目中。

无论如何，我正在使用：

display: flex;
align-items: center;
/* AND */
justify-content: center;

到我的 CSS 文件中的“body”。这不应该使元素自动显示在中心、垂直和水平方向吗？我没有任何其他 CSS 规则会扰乱它。反正我不这么认为。

但是，如果我检查该元素并转到代码的最上面一行 - HTML 代码是：

<html lang="en">

然后（仍然在 Inspect Element 内）将以下内容添加到 element.style
height: 100%;

以及将其添加到我在 CSS 文件中声明的 body 标记中。
height: 100%;

噗，它起作用了。它将元素垂直居中于页面中心。它已经水平居中。只是在我添加该代码之前不是垂直的。但我认为我不必将 100% 的高度添加到

<html lang="en"> element.style

那么我在这里做错了什么？我正在使用 VSCode，然后预览带有 LifeServer 扩展的 HTML 文件。我正在学习 Flexbox - 因为我最近才开始认真编码，希望最终能找到一份工作（在线教育结束后）。

这是我的代码，很抱歉这篇文章很长。只是非常困惑。

body {
  background-color: #dbdbdb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrows {
  height: 70px;
}


/* .left-arrow {
  display: flex;
  align-items: center;
  justify-content: center; */
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.top {
  display: flex;
  align-items: center;
  gap: 50px;
}
<div class="container">
  <div class="top">
    <img src="images/left-arrow.svg" class="arrows arrow-left" alt="Left Arrow">
    <div class="frame">
      <div class="slider"></div>
    </div>
    <img src="images/right-arrow.svg" class="arrows arrow-right" alt="Right Arrow">
  </div>
  <div class="bottom"></div>
</div>

<script src="slider.js"></script>

slider.js 文件中没有代码。我还没到那一步。

我尝试将多个 CSS 类的高度从 100% 和 100vh 更改。老实说，我不确定发生了什么，我已经删除了一些 HTML 元素以及一些 CSS 元素。

html css flexbox centering
1个回答
0
投票

哦...每次我想要将某些东西集中在身体中心时都会遇到的问题...

问题是你的身体

height
不会自动设置为视口高度的100％，如果你的内容没有填充该高度，你需要在身体上手动设置它，如下所示：

body {
   height: 100vh;
}

“vh”是尺寸单位，代表“视口高度”。当我们将 body 的高度设置为 100vh 时，它基本上意味着 body 的高度应该是视口的 100%，有趣的是，如果您只是简单地将 body 的高度设置为 100%，则它不会工作！这可能有点令人困惑，但我现在会解释一下。当你这样做时：

body {
   height: 100%;
}

它基本上意味着主体的高度应该是父元素（即 html 标签）的 100%，但需要注意的是，如果您没有为 html 标签设置高度，则高度将由子元素自动设置元素。

我希望我的解释足够好，以便您能够解决您的问题，如果您还有任何问题，请告诉我

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.