繁体   English   中英

如何将 inline-flex label 与其周围的文本垂直对齐?

[英]How do I align an inline-flex label vertically with the text surrounding it?

我有一个 label,它有display: inline-flex和 span。 我想将 label 居中,以便其文本的中间与文本的 rest 正确对齐。

未对齐 label

我怎么能这样做? 我想这是一个常见的问题,因为带标签的文本相当普遍。

我的代码使用顺风类。

<div class="font-[400] text-[14px] leading-[23px] text-[#4A585F]">
  <span
    class="inline-flex gap-[4px] px-[4px] py-[2px] rounded-[100px] items-center bg-[#F4F5F7] h-fit w-fit mr-[12px]"
    ><img
      class="w-[16px] h-[16px] rounded-[63px] border border-solid border-black"
      src="https://img.favpng.com/1/15/9/scalable-vector-graphics-computer-icons-user-profile-portable-network-graphics-png-favpng-n05BjRqcBz9Ub9NtAbz8GXEaN.jpg"
    /><span
      class="font-[400] text-[12px] leading-[20px] text-[#4A585F] whitespace-nowrap"
      >Random Username</span
    ></span
  ><span class="mr-[36px]"
    >added a comment to <a class="text-[#2875D0]">Random Document</a> in
    <a class="text-[#2875D0]">Random Task Case</a></span
  ><span class="italic text-[12px] leading-[20px]">1 hour ago</span>
</div>

我试过设置周围文本的行高,但这只会增加文本行之间的空间。 我无法在父容器上设置 flex,因为这会将文本的 label 和 rest 分成单独的部分。 我尝试使用 margin-top 和 padding-top 但这稍微改变了它,但没有按照我预期的方式使用大范围的值。

我期待以下内容:在此处输入图片描述

如果仔细看,Random Username 应该向下移动了几个像素才能与文本的 rest 对齐。

编辑:我通过在 label 上使用 float-left 并将文本的 rest 的行高设置为等于 label 文本取得了进展,这适用于我的特定用例。 但是,如果我的 label 位于我的文本中心,这将不起作用。

您可以使用align-middlemt-2 class 来获得预期的结果。

 <script src="https://cdn.tailwindcss.com"></script> <div class="font-[400] text-[14px] leading-[23px] mt-2 text-[#4A585F]"> <span class="inline-flex gap-[4px] align-middle px-[4px] py-[2px] rounded-[100px] items-center bg-[#F4F5F7] h-fit w-fit mr-[12px]" ><img class="w-[16px] h-[16px] rounded-[63px] border border-solid border-black" src="https://img.favpng.com/1/15/9/scalable-vector-graphics-computer-icons-user-profile-portable.network-graphics-png-favpng-n05BjRqcBz9Ub9NtAbz8GXEaN.jpg" /><span class="font-[400] text-[12px] leading-[20px] text-[#4A585F] whitespace-nowrap" >Random Username</span ></span ><span class="mr-[36px]" >added a comment to <a class="text-[#2875D0]">Random Document</a> in <a class="text-[#2875D0]">Random Task Case</a></span ><span class="italic text-[12px] leading-[20px]">1 hour ago</span> </div>

①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM