Question

我在这里经历了很多问题以及许多文章和bootstrap 4文档，但未能找到我正在寻找的内容。

我正在寻找为所有列创建具有完全相同高度的框，并且还垂直居中对齐框内的文本。我设法将文本垂直对齐，但框的高度不同。

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

基本上，这是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

或，如果您要对使用Bootstrap类的.box 应用相同的更改 ... < / p>

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>

Demo

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

更改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;
    }

垂直对齐DIV＆amp; Bootstrap 4中的文本

4 个答案: