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

Posted 2023-03-05

【中文标题】引导列中的中心 DIV + 文本 [重复]

【英文标题】：Center DIV + Text in Bootstrap Columns [duplicate]

【发布时间】：2019-09-07 13:14:31

【问题描述】：

我一直在试图弄清楚如何在我的引导网格中垂直对齐内容。

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

现在是这样的：

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%);

还有一些其他代码，但是是的.. 不成功。

【问题讨论】：

你能简单地添加你的代码吗？你提到的代码是不够的。

【参考方案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>

【讨论】：

谢谢，成功了！ :)

【参考方案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>