中心DIV + Bootstrap列中的文本[重复]

Question

这个问题在这里已有答案：

• Bootstrap 4 Center Vertical and Horizontal Alignment 6个答案
• Center three col-md-3 columns in Bootstrap 4 3回答
• Center the content inside a column in Bootstrap 4 3回答

我一直试图找出，如何垂直对齐我的引导网格中的内容。

我有3列col-md-4列，我想在其中居中另一个div + test。

这就是它现在的样子：

https://i.imgur.com/Gy7WFI8.png

实际应该如何看：https://i.imgur.com/tfrLr9p.png

只是一切都集中。

我已经搜索了一些解决方案，但它们都没有真正为我解决。

多数民众赞成我的HTML：

            <div class="col-md-4 my-auto">
              <div><p>TEST</p></div>
              <p>This is an example</p>
            </div>
            <div class="col-md-4">
              <div><p>TEST2</p></div>
              <p>This is an example</p>
            </div>
            <div class="col-md-4">
              <div><p>TEST3</p></div>
              <p>This is an example</p>
            </div>
        </div>

由于我没有成功使用CSS部件，我认为没有显示它的实际问题，但无论如何：

我试过这个：

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

除此之外：

.vertical-align {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

还有其他一些代码，但是没有成功。

Answer 1

用flexbox来实现它

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.content-block {
  display: flex;
  justify-content: space-between;
}

.content {
  display: flex;
  flex-direction: column;
}

.content .tag p {
  text-align: center;
  background: red;
  padding: 10px;
  color: white;
  border-radius: 10px;
}


}

<div class="content-block">
  <div class="col-md-4 my-auto content">
    <div class="tag">
      <p>TEST</p>
    </div>
    <p>This is an example</p>
  </div>
  <div class="col-md-4 content">
    <div class="tag">
      <p>TEST2</p>
    </div>
    <p>This is an example</p>
  </div>
  <div class="col-md-4 content">
    <div class="tag">
      <p>TEST3</p>
    </div>
    <p>This is an example</p>
  </div>
</div>

Answer 2

我在这里使用过Bootstrap Flexbox，希望这能解决你的问题

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-md-4 d-inline-flex justify-content-center align-items-center my-auto">
    <div>
      <p>TEST</p>
    </div>
    <p>This is an example</p>
  </div>
  <div class="col-md-4 d-inline-flex justify-content-center align-items-center">
    <div> 
      <p>TEST2</p>
    </div>
    <p>This is an example</p>
  </div>
  <div class="col-md-4 d-inline-flex justify-content-center align-items-center">
    <div>
      <p>TEST3</p>
    </div>
    <p>This is an example</p>
  </div>
</div>