Bootstrap 4中的垂直对齐DIV和文本

Posted 2023-03-05

【中文标题】Bootstrap 4中的垂直对齐DIV和文本

【英文标题】：Vertical align DIV & Text in Bootstrap 4

【发布时间】：2018-09-14 08:45:46

【问题描述】：

我在这里查看了许多问题以及许多文章和 bootstrap 4 文档，但未能找到我要查找的内容。

演示：https://jsfiddle.net/zxLLqsm0/

我希望为所有列创建具有完全相同高度的框，并将框内的文本垂直居中对齐。我设法使文本垂直对齐，但框的高度不同。

这是我的 html

<div class="container">
  <div class="row align-items-center">
    <div class="col-4">
      <div class="box">
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box">
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box">
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

还有我的 CSS：

.container 
  margin-top: 15px;

.box 
  background-color: grey;
  padding: 15px;

【参考方案1】：

基本上，这个question has already been answered。

使用 flexbox 和 justify-content-center 使 box 居中，h-100 使 height:100%...

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

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

---

或者，如果您想对 .box 应用相同的更改而不是使用 Bootstrap 类...

https://jsfiddle.net/g38e9Lfm/

.box 
  background-color: grey;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;

【讨论】：

谢谢。它没有出现在我的搜索中！

【参考方案2】：

你可以添加标准的引导类，不要编写额外的 css

 <div class="container">
  <div class="row">
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 1</h6>
          <p>A small description</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 2</h6>
          <p>A bigger description goes here</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 3</h6>
          <p>A large description is placed here to make whatever changes we need.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Demo

【讨论】：

我更喜欢@ZimSystem 提供的另一种方法。更简洁的代码，但谢谢。作品也很漂亮:)

【参考方案3】：

这里有一个方法，希望对你有帮助。

.box
  background-color: grey;
  padding: 15px;
  height: 200px; 
  display:table;

用 class= "text" 将你的文本部分包裹在一个新的 div 下，然后添加 css

.text
display:table-cell;
vertical-align:middle;

【参考方案4】：

将类 align-item-center 更改为 row-eq-height 更多信息：http://getbootstrap.com.vn/examples/equal-height-columns/

理解检查： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果想要垂直居中对齐可以使用下面的代码：

    .box 
      background-color: grey;
      padding: 15px;
      height: 100%;
      display: flex;
      flex-wrap:wrap;
      align-items: center;
      align-content:center;
      text-align:center;
      justify-content: center;