在Bootstrap中垂直對齊DIV和文本4

Question

我在這里經歷了很多問題以及許多文章和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;
}

Answer 1

基本上，這個問題已經得到了回答 。

使用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%;
}

Answer 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>

演示

Answer 3

這是一種方法，希望它能幫到你。

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

在class =“text”的新div下包裝文本部分，然后添加css

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

Answer 4

更改row-eq-height的類align-item-center更多信息： 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;
    }