Bootstrap align-middle 文本未应用于 div

Question

我正在尝试在 div 中间垂直对齐文本（ <span class="align-middle">middle</span> ）。

这是我的代码：

<div class="col-4 shadow product-added">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-5">
          <div class="row">
            <img src="<?php echo $OTHERIMAGE1; ?>" class="">
          </div>
        </div>
        <div class="col-7">
          <span class="align-middle">middle</span>
        </div>
      </div>
    </div>
  </div>
</div>

为什么文本没有按照应有的方式对齐？

Answer 1

它实际上正在工作，但它是在跨度内进行的，因为 align-middle 仅适用于内联元素。

您应该在父 div 上使用它，但使用类 d-flex align-items-center

<div class="col-7 d-flex align-items-center">

我将它保存在 JSfiddle 上，同时向行添加高度以查看它是否可以正常工作：

https://jsfiddle.net/vca42kxo/2/