时间戳

首页 > 解决方案 > 如何在行的底部对齐内容

html - 如何在行的底部对齐内容

问题描述

我觉得有点笨，但是在尝试将两列（一行内）的内容对齐在同一基数（高度）上时，我被卡住了。

这是代码（简单的 html 和 css 加上 bootstrap 5）：

 <div class="row">
  <div class="col-md-2" style="border: 1px solid; border-color: #FFFFFF;">
   <i class="fas fa-mobile-alt fa-2x" style="color: #FFFFFF;"></i>
  </div>
  <div class="col-md-10" style="border: 1px solid; border-color: #FFFFFF;">
   <span class="p-phone">Telefono e fax: +39 123456789</span>
  </div>
 </div><!-- end row -->

p-phone 类只是一个简单的定义：

.p-phone{
  color: #FFFFFF;
  font-weight: bold;
  font-size: 1.5rem;
}

你能帮帮我吗？

编辑：感谢所有信息，到目前为止，我已经能够创建一个 jsfiddle（但不包括 bootstrap 5 文件）

https://jsfiddle.net/davidep/fwcudq0y/3/

基本上我想让两列内的内容在同一个基数（高度）上对齐

标签： htmlcssbootstrap-5

解决方案

将类align-items-baseline添加到行的 div 中

或将以下样式添加到行中

.row {
   align-items: baseline;
}

推荐阅读