Question

我正在学习使用bootstrap 4的绳索，我偶然发现了flexbox的一个小问题。我试图在页面的中心对齐文本，它只在我添加类来填充视口时才起作用。为什么它只在我使用它时才有效？我无法绕过它，我想你们可以帮我一臂之力。这是一小段代码，所以我会发布我写的所有内容。

.fill-viewport {
  min-height: 100vh;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Landing Page</title>
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  </head>
  <body>

    <section id="introduction">
      <div class="container">
        <div class="row fill-viewport align-items-center">
          <div class="col-12">
            <h1>Some text here</h1>
            <p>Please center </p>
            <a href="#" role="button">Try it yesterday</a>
          </div>
        </div>
      </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  
  </body>
</html>

注意：显然，CSS类位于单独的样式表中。我只是粘贴了HTML下面的代码，所以你们可以看到我在文件中包含的所有内容。

Answer 1

因为默认情况下，行的高度是它包含的内容的高度。因此，align-items: center在视觉上没有任何影响。

宣布height或min-height后，align-items开始制作效果。

示例：

div {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid;
}

<div>Hello</div>
<div style="height:100px;">Hello</div>

为什么填充我的视口高度使flexbox工作？

1 个答案: