居中 DIV + Bootstrap 列中的文本

Question

我一直在努力弄清楚如何垂直对齐 bootstrap 网格中的内容。

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

这是现在的样子：

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

实际应该是什么样子： https://i.imgur.com/tfrLr9p.png

一切都居中。

我已经搜索了一些解决方案，但 none 其中确实对我有用。

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

我在这里使用了 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>

Answer 2

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

居中 DIV + Bootstrap 列中的文本

Center DIV + Text in Bootstrap Columns

html

css

center

vertical-alignment

bootstrap-4