如何解决Bootstrap网格单元格内容无法垂直对齐的问题？

问题根因 #

• 你使用的align-middle类是Bootstrap针对行内元素、表格元素设计的垂直对齐类，不适用于flex布局的网格系统，用错类自然不会生效。
• Bootstrap 4/5版本的.row默认是flex容器，但如果没有给行设置明确高度，行的高度会恰好等于内部最高子元素的高度，没有多余垂直空间的前提下，就算加了正确的flex对齐类也看不出效果。

解决方法 #

两种方案选其一即可：

1. 整行统一垂直对齐：给.row添加align-items-center类，同时根据你的设计需求给行设置明确高度，示例修改如下：

<div id="menu-bar">
    <div class="container-fluid text-center ">
        <!-- 第一行添加align-items-center和自定义高度 -->
        <div class="row border-bottom border-dark align-items-center" style="height: 70px;">
          <div class="col">
          Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col col-3">
            6
          </div>
          <div class="col col-2">
            7
          </div>
          <div class="col col-2">
            <button type="button" class="btn btn-dark">Play Video</button>
          </div>
        </div>
        <!-- 第二行添加align-items-center和自定义高度 -->
        <div class="row align-items-center" style="font-size: smaller; height: 50px;">
          <div class="col col-3">
            1
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col col-3">
            Colour
          </div>
          <div class="col col-4">
            Preview text
          </div>
        </div>
      </div>
</div>

2. 单个列单独控制对齐：如果不需要整行统一对齐，给需要垂直居中的.col添加align-self-center类即可，不需要修改行的属性。

注意事项 #

• 如果你使用的是Bootstrap 3及更早版本，默认行不是flex容器，上述方案不生效，建议升级到Bootstrap 4以上版本，或者给行手动加display: flex属性再使用对齐类。

内容的提问来源于stack exchange，提问作者David Johnson