twitter-bootstrap 在 Bootstrap 4 中垂直对齐 DIV 和文本

Vertical align DIV & Text in Bootstrap 4

提问by Elaine Byene

I have gone through many questions here as well as many articles and bootstrap 4 documentation but failed to find what I'm looking for.

我在这里解决了很多问题以及很多文章和 bootstrap 4 文档，但没有找到我要找的东西。

DEMO: https://jsfiddle.net/zxLLqsm0/

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

I'm looking to create boxes with exact same height for all columns and also vertically center align the text inside the boxes. I managed to get the text vertically aligned but the heights of the boxes are different.

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

Here's my HTML

这是我的 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>

And my CSS:

还有我的 CSS：

.container {
  margin-top: 15px;
}
.box {
  background-color: grey;
  padding: 15px;
}

回答by Zim

Basically, this question has already been answered.

基本上，这个问题已经得到了回答。

Use flexbox and justify-content-centerto make the boxcentered, and h-100for height:100%...

使用 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

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

---

---

Or,if you want to apply the same changes to .boxinsteadof using the Bootstrap classes...

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

https://jsfiddle.net/g38e9Lfm/

https://jsfiddle.net/g38e9Lfm/

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

回答by Den Potapov

You can add standard bootstrap classes and do not write extra css

您可以添加标准引导程序类，而无需编写额外的 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

演示

回答by Ash

Here is an approach, hope it will help you.

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

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

Wrap up your text part under a new div with class = "text", then add css

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

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

回答by Ivan Iyari

Change the class align-item-centerfor row-eq-heightmore info: http://getbootstrap.com.vn/examples/equal-height-columns/

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

For understand check: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

And if want vertically center align can use the next code:

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

    .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;
    }