Question

我一直在尝试找出如何在引导网格中真正对齐内容。

我有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 Part上没有获得成功，所以我认为实际上并没有显示它的问题，但是无论如何：

我尝试了这个：

.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 +文本

2 个答案: