Question

也许我没有设置好吗？我一直在查看过去3个小时的代码，所以我可能不会在寻找某些东西。无论哪种方式，我在div中都有这个h3，我希望它在水平和垂直方向都居中，但只有水平方向正在工作。

<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

这个答案是针对bootstrap 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>

希望这有帮助！

Answer 3

检查这个css

<div class="col-md-4">
        <h3 class="centered">{{ uni.u_name }</h3>
</div>

这是css（把它放在head标签中）

<style>
.centered {
    display: flex;
    flex-direction: row !important;
    align-content: center !important;
    justify-content: center !important;
    align-self: center !important;
    align-items: center !important;
    margin:auto;
    background-image:url({{ uni.u_homepage_pic.url }});
    background-repeat:no-repeat;
    width: 350px; 
    height: 225px;
    color:#ffffff;
}
<style>

Answer 4

你可以像我的例子那样做：https://jsfiddle.net/h5xofjqf/ 或者您只需要为容器设置固定高度，然后apps:[ "scripts: [] ]就会有

h1

Answer 5

财产是保证金：自动; ......做这个

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

5 个答案: