引导列中的中心DIV +文本

时间:2019-04-17 10:04:51

标签: html css bootstrap-4 center vertical-alignment

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

我有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%);
}

还有一些其他代码,但是,是的。..

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分: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>