时间戳

首页 > 解决方案 > Bootstrap align-middle 文本未在 div 中应用

html - Bootstrap align-middle 文本未在 div 中应用

问题描述

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

这是我的代码：

<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>

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

标签： htmlcsstwitter-bootstrap

解决方案

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

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

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

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

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

推荐阅读