Question

我正在使用Bootstrap 4构建网格布局。我试图在保持列全高的同时垂直对齐列内的内容。

目前，我的布局如下所示：

但是，我希望列的内容像这样对齐：

当前CSS：

html, body {
  height: 100%;
}

.flex-fill {
  flex: 1;
}

当前HTML：

<div class="container d-flex h-100 flex-column">
    <div class="row flex-fill d-flex">
      <div class="col-8 bg-dark m-2">
        TEXT
      </div>
      <div class="col bg-dark m-2">
        TEXT
      </div>
    </div>
    <div class="row flex-fill d-flex">
      <div class="col bg-dark m-2">
        TEXT
      </div>
  </div>
</div>

另请参阅JSFiddle。

我已经尝试使用.align-self-center类，并且能够在行中间对齐内容。但是，我无法保持该列的全高。

关于如何实现目标布局的任何想法？

非常感谢您的支持！

Answer 1

您可以使用

style="position: absolute;              
         top: 50%;"

职位。

html,
body {
  height: 100%;
}

.flex-fill {
  flex: 1;
}

.container {
  padding: 2em 1em;
}

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<div class="container d-flex h-100 flex-column">
  <div class="row flex-fill d-flex">
    <div class="col-8 bg-dark m-2">
      <p style="position: absolute;              
         top: 50%;">TEXT </p>
    </div>
    <div class="col bg-dark m-2">
      <p style="position: absolute;              
         top: 50%;">TEXT</p>
    </div>
  </div>
  <div class="row flex-fill d-flex">
    <div class="col bg-dark m-2">
      <p style="position: absolute;              
         top: 50%;">TEXT </p>
    </div>
  </div>
</div>

Answer 2

NishargShah关于使用Flexbox是正确的。 Bootstrap是围绕Flexbox重新设计的，这是从Bootstrap3到Bootstrap4 的核心更改（还有许多其他更改，但是从Floats到Flexbox的转换是核心更改）。

但是，有一种更简单的方法可以做到这一点：

更改：

  <div class="col-8 bg-dark m-2">
    TEXT
  </div>

收件人：

  <div class="col-8 bg-dark m-2 d-flex align-items-center">
    TEXT
  </div>

Modified jsFiddle

html, body {
  height: 100%;
  color:white !important;
}

.flex-fill {
  flex: 1;
}

.container {
  padding: 2em 1em;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="container d-flex h-100 flex-column">
    <div class="row flex-fill d-flex">
      <div class="col-8 bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
      <div class="col bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
    </div>
    <div class="row flex-fill d-flex">
      <div class="col bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
    </div>
</div>

如果使用的是Bootstrap，请尽可能使用随附的Bootstrap类。 Bootstrap具有许多专门用于Flexbox的预制类。

关于flexbox的一件很酷的事情是，任何容器都可以是flexbox的父级，甚至是那些属于flexbox项的容器。

Flexbox需要做两件事：

父容器
子项

某些flexbox设置在父项上设置，其余在子项上设置。在这种情况下，您仅需要在父级上进行设置。

参考文献：

Excellent 20-min video tutorial

Best-of-breed flexbox cheatsheet

Answer 3

您不需要额外的CSS。只需使用Bootstrap实用程序类...

.min-vh-100-获得完整的内容高度
.d-flex-用于显示弯曲
.align-items-center-用于垂直对齐
.justify-content-center-用于水平对齐

HTML：

<div class="container d-flex min-vh-100 flex-column text-white">
    <div class="row flex-fill d-flex">
        <div class="col-8 bg-dark m-2 d-flex justify-content-center align-items-center">
            TEXT
        </div>
        <div class="col bg-dark m-2 d-flex justify-content-center align-items-center">
            TEXT
        </div>
    </div>
    <div class="row flex-fill d-flex">
        <div class="col bg-dark m-2 d-flex justify-content-center align-items-center">
            TEXT
        </div>
    </div>
</div>

https://www.codeply.com/go/RVA1mJhDTg?q=

Answer 4

对于垂直对齐，必须使用FLEXBOX

将此CSS添加到您的代码中，您的文本将垂直居中。

我更改了您的HTML的一点点，因为要应用CSS，您需要用一些标签包裹元素，所以我在这里使用了span标签，您可以添加您想要的任何标签。

我在这里使用attribute selector，有关更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

div[class*="col"] {
  display: flex;
}

div[class*="col"] span {
  align-self: center;
}

html, body {
  height: 100%;
}

.flex-fill {
  flex: 1;
}

.container {
  padding: 2em 1em;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container d-flex h-100 flex-column">
  <div class="row flex-fill d-flex">
    <div class="col-8 bg-dark m-2 d-flex">
      <span class="align-self-center">TEXT</span>
    </div>
    <div class="col bg-dark m-2 d-flex">
       <span class="align-self-center">TEXT</span>
    </div>
  </div>
  <div class="row flex-fill d-flex">
    <div class="col bg-dark m-2 d-flex">
       <span class="align-self-center">TEXT</span>
    </div>
  </div>
</div>

您还可以使用自举类，我不使用自举类，因为它包含重要的BOOTSTRAP长类使我的HTML非常复杂，顺便说一下，我们也会失去网站排名。

html, body {
  height: 100%;
}

.flex-fill {
  flex: 1;
}

.container {
  padding: 2em 1em;
}

div[class*="col"] {
  display: flex;
}

div[class*="col"] span {
  align-self: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container d-flex h-100 flex-column">
  <div class="row flex-fill d-flex">
    <div class="col-8 bg-dark m-2">
      <span>TEXT</span>
    </div>
    <div class="col bg-dark m-2">
       <span>TEXT</span>
    </div>
  </div>
  <div class="row flex-fill d-flex">
    <div class="col bg-dark m-2">
       <span>TEXT</span>
    </div>
  </div>
</div>

如何使用Bootstrap 4在列内垂直对齐内容

4 个答案:

参考文献：