时间戳

首页 > 解决方案 > 我怎样才能让第一行在顶部，第二行垂直居中？

html - 我怎样才能让第一行在顶部，第二行垂直居中？

问题描述

我正在使用 Bootstrap 5，我试图让第一行位于页面顶部，第二行占据视口的其余部分，并使其内容垂直居中而没有滚动条（假设视口足够高）。这是基本代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container min-vh-100">
  <div class="row">
    <div class="col-12 col-md-2">
      Content
    </div>
    <div class="col-12 col-md-10">
      Content
    </div>
  </div>

  <div class="row min-vh-100 align-items-center">
    <div class="col-12 col-lg-6">
      Content
    </div>
    <div class="col-12 col-lg-6">
      Content
    </div>
  </div>
</div>

但是，第二行确实正确地将其内容居中，因为我使用的是 min-vh-100 类，它会产生滚动条（删除第一行会使滚动条按预期消失）。将第二行的 min-vh-100 更改为 h-100 类并没有帮助（实际上使事情变得更糟）。问题似乎是如何告诉第二行占据父级剩余高度的 100%，而不是视口高度的 100%。

标签： htmlcsstwitter-bootstrapvertical-alignment

解决方案

您需要容器上的d-flex和类。flex-column然后，不要在第二行强制高度，而是使用flex-fill它来使用剩余空间。固定尺寸应该是最后的手段。

请参阅https://getbootstrap.com/docs/5.0/utilities/flex。

.row:first-child {
  background: thistle;
}

.row:last-child {
  background: moccasin;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container min-vh-100 d-flex flex-column">
  <div class="row">
    <div class="col-2">
      Content
    </div>
    <div class="col-10">
      Content
    </div>
  </div>

  <div class="row flex-fill align-items-center">
    <div class="col-6">
      Content
    </div>
    <div class="col-6">
      Content
    </div>
  </div>
</div>

推荐阅读