Css 引导4-使文本/图标与行齐平（底部对齐）

参考下面的屏幕截图（红色/蓝色线条来自Plastics-a firefox插件）

上述代码

<div class="row my-auto">
     <p class="h6">
        <span class="pl-3 text-white  align-bottom"><i class="icofont-business-man  "></i>Particulars - Add Particulars Below</span>
         <span class="align-bottom"></span>
     </p>   
</div> 

详情-在下面添加详情

您好，我正在尝试将文本从当前的红线齐平到行的底部（蓝线）。其目的是使文本与行的底部齐平，就像图标一样

我试过像我的auto、mb-0、align-*、no-gotter这样的bootsrap类，但都没有用

---

有什么指针吗？

我个人喜欢使用这种对齐方式。我不是引导程序专家，但您应该能够使用类似这样的类来完成它

<div class="row my-auto">
     <p class="h6 d-flex align-items-baseline">
        <span class="pl-3 text-white  align-bottom"><i class="icofont-business-man  "></i>Particulars - Add Particulars Below</span>
         <span class="align-bottom"></span>
     </p>   
</div> 

---

试试这个

<div class="row my-auto d-flex align-items-end">
   <p class="h6">
      <span class="pl-3 text-white  align-bottom"><i class="icofont-business-man  "></i>Particulars - Add Particulars Below</span>
      <span class="align-bottom"></span>
   </p>   
</div> 

详情-在下面添加详情

Hi…我在div标签中尝试了“d-flex对齐项目结束”。不，在p标签上试过了。div标签和p标签中的编号Treid。否。文本仍与行的顶部齐平。我需要做一个1行的表格才能正确对齐吗？鲁佩什->你的逻辑似乎正确->。只是在这里好像不能工作？这是ICOFNT问题吗？请尝试从您的

p

标签中删除

。鲁佩什-我已根据您的建议删除对齐底部。同样的问题。它好像被卡在了最上面？我必须制作一个1行表格才能使其与底部完全对齐吗？您可以使用表格，但理想情况下，flexbox会完美地解决您的问题。Chris->我尝试了上面提到的两种方法，但文本和图标似乎与行顶部齐平。。。我需要做一个1行表来解决这个问题吗？

<div class="row my-auto d-flex align-items-end">
   <p class="h6">
      <span class="pl-3 text-white  align-bottom"><i class="icofont-business-man  "></i>Particulars - Add Particulars Below</span>
      <span class="align-bottom"></span>
   </p>   
</div>