如何使用 Bootstrap 5 垂直对齐一行文本

Question

我正在尝试将文本垂直对齐在行的中间。

以下是我所做的。垂直对齐不起作用。如何使文本在行中间垂直对齐？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<div class="container-fluid">

  <div class="row align-middle" style="min-height: 500px;">
    <div class="col-6 bg-danger align-middle">
      LEFT/MIDDLE TEXT
    </div>

    <div class="col-6 bg-primary align-middle">
      RIGHT/MIDDLE TEXT
    </div>
  </div>

</div>

Answer 1

使用align-items-center因为row已经display: flex

从文档中，

请注意，垂直对齐仅影响内联、内联块、内联表和表格单元格元素。

...

要垂直居中非内联内容（例如<div>s 等），请使用我们的弹性框实用程序。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<div class="container-fluid">

  <div class="row align-items-center vh-100">
    <div class="col-6 bg-danger">
      LEFT/MIDDLE TEXT
    </div>

    <div class="col-6 bg-primary">
      RIGHT/MIDDLE TEXT
    </div>
  </div>

</div>

Answer 2

为了使的内容.col-6垂直居中而不是在.col-6之内.row，请使用.col-6.d-flex.flex-column.justify-content-center。这样就形成了.col-6一个弹性盒子容器。您会注意到，在下面的示例中，列的高度与您的示例中的相同，如果这不是您的意图，那么Dipas 的解决方案完全没问题。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<div class="container-fluid">

  <div class="row" style="min-height: 500px;">
    <div class="col-6 bg-danger d-flex flex-column justify-content-center">
      LEFT/MIDDLE TEXT
    </div>

    <div class="col-6 bg-primary d-flex flex-column justify-content-center">
      RIGHT/MIDDLE TEXT
    </div>
  </div>

</div>