Question

我正在使用Bootstrap 4，我尝试创建一个所有cols垂直居中的行，为此我使用Bootstrap 4 class align-items-center，按照this SO answer中的建议。

我有以下MWE：

＆＃13;

.yellow-row {
  background-color: #f2c14e;
  color: #141823;
}

.blue-col {
  background-color: blue;
  color: white;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <div class="row yellow-row align-items-center">
      <div class="col-lg-7 blue-col text-center">
        <h1>Testing</h1>
        <p>Lorem reiciendis fuga possimus quibusdam doloribus Quos eaque earum voluptatem culpa vel obcaecati, ducimus sed Necessitatibus repudiandae suscipit ipsam magni laudantium? Inventore iusto sequi excepturi voluptatibus totam cupiditate. Dignissimos
          quasi</p>
      </div>
      <div class="col-lg-5 text-center">
        <h1>Only a test</h1>
        <p>Lorem quisquam dolor velit maxime officia. Quos quo nihil sint sequi iste. Sed praesentium nihil illum amet tempora. Dolore exercitationem praesentium iure accusantium quibusdam? Fuga ex inventore dignissimos aut quas</p>
        <p>Lorem dolorum officiis velit deserunt facere? Dolorum provident aliquid sapiente quam perferendis Repellendus magni culpa nesciunt laborum dolorum Pariatur similique ullam quasi sit doloremque cupiditate! Autem odit mollitia libero magnam!</p>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

上面的HTML / CSS会在更大的屏幕宽度上产生输出：

预期结果是蓝色列与父行的高度相同（因此另一个列）。我已经尝试将min-height: 100%添加到.blue-col课程中，我也尝试了height: 100%，但都没有产生预期的结果。我还尝试将Bootstrap 4类h-100添加到blue-col，而不是预期的结果。

我觉得我对于Flexbox /垂直居中在Bootstrap 4中的工作方式缺乏一些基本的了解。

Answer 1

问题是您希望居中对齐列的内容，而不是列本身。您可以将blue-col设为灵活变量列（d-flex flex-column），然后使用justify-content-center将其对齐。内容...

<div class="container">
    <div class="row yellow-row">
        <div class="col-lg-7 blue-col text-center d-flex flex-column justify-content-center">
            <h1>Testing</h1>
            <p>Lorem reiciendis fuga possimus quibusdam doloribus Quos eaque earum voluptatem culpa vel obcaecati, ducimus sed Necessitatibus repudiandae suscipit ipsam magni laudantium? Inventore iusto sequi excepturi voluptatibus totam cupiditate. Dignissimos
                    quasi</p>
        </div>
        <div class="col-lg-5 text-center">
            <h1>Only a test</h1>
            <p>Lorem quisquam dolor velit maxime officia. Quos quo nihil sint sequi iste. Sed praesentium nihil illum amet tempora. Dolore exercitationem praesentium iure accusantium quibusdam? Fuga ex inventore dignissimos aut quas</p>
            <p>Lorem dolorum officiis velit deserunt facere? Dolorum provident aliquid sapiente quam perferendis Repellendus magni culpa nesciunt laborum dolorum Pariatur similique ullam quasi sit doloremque cupiditate! Autem odit mollitia libero magnam!</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/kSvLCODvZC

相关：Equal height columns + vertical and horizontal centered content in Bootstrap 4

Bootstrap 4 - 使用align-items-center时的相等col高度

1 个答案: