垂直对齐与引导程序不起作用

Question

也许我没有正确设置它？在过去的3个小时中，我一直在查看代码，因此有可能我正在寻找一些东西。无论哪种方式，我都将这个h3放在div中，并且希望将其水平和垂直居中放置，但是只能使用水平。

<div class="col-md-4">
    <div class="align-items-center" style="background-image:url({{ uni.u_homepage_pic.url }}); background-repeat:no-repeat; width: 350px; height: 225px;">
        <h3 class="text-center" style="color:#ffffff;">{{ uni.u_name }</h3>
    </div>
</div>

更新：使用Bootstrap V4

Answer 1

.align-items-center {
  display: flex; 
  align-items: center;  /*Aligns vertically center */
  justify-content: center; /*Aligns horizontally center */
}

<div class="col-md-4">
  <div class="align-items-center" style="background:red; width: 350px; height: 225px;">
    <h3 class="text-center" style="">Hello</h3>
  </div>
</div>

Answer 2

此答案适用于引导程序 4：

要垂直对齐列内容，您可以my-auto在列本身中使用类：

<div class="col-md-4 my-auto">
    <div style="background-image:url({{ uni.u_homepage_pic.url }}); 
        background-repeat:no-repeat; width: 350px; height: 225px;">
        <h3 class="text-center" style="color:#ffffff;">
           {{ uni.u_name }
        </h3>
    </div>
</div>

此外，要水平对齐列内的项目，您可以使用mx-auto并且对于水平和垂直对齐，请使用m-auto。水平对齐适用于单列。

要对齐所有列，您需要align-items-*在row元素内部而不是在col元素内部提供类：

<div class="container">
  <div class="row align-items-start"><!-- align contents to top -->
    <div class="col">
      Top A
    </div>
    <div class="col">
      Top B
    </div>
    <div class="col">
      Top C
    </div>
  </div>
  <div class="row align-items-center"><!-- align contents to center -->
    <div class="col">
      Mid A
    </div>
    <div class="col">
      Mid B
    </div>
    <div class="col">
      Mid C
    </div>
  </div>
  <div class="row align-items-end"><!-- align contents to end -->
    <div class="col">
      Bottom A
    </div>
    <div class="col">
      Bottom B
    </div>
    <div class="col">
      Bottom C
    </div>
  </div>
</div>

希望这可以帮助！