时间戳

首页 > 解决方案 > 在 Bootstrap 中垂直对齐文本

html - 在 Bootstrap 中垂直对齐文本

问题描述

如何在 Bootstrap 中垂直对齐列中的元素。它快把我逼疯了。这是我的 HTML：

        <div class="row mx-3 border rounded">
          <div class="col-sm-6 p-3 ">
            <img src="/assets/uploads/user/headshot.jpeg" class="border rounded-circle comment-user-img">
            <span class="small-text align-middle">My name</span>
          </div>
          <div class="col-sm-6 p-3 text-right">
            <span class="small-text align-middle">Today's Date</span>
          </div>
        </div>

这就是结果：https ://pasteboard.co/J7RKPj3.png

我尝试了对齐基线，对齐中间，将它们全部放在一列中（浮动向右移动日期）......似乎没有任何效果。我查看了过去的答案，但对于如此简单的事情，答案似乎并不完善。

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

另一种将文本垂直居中对齐的解决方案是将 CSS 属性设置line-height为 div 高度。

这是一个示例 https://www.w3schools.com/css/tryit.asp?filename=trycss_align_line-height

推荐阅读