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

Question

我有一个 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 位于我的文本中心，这将不起作用。

Answer 1

您可以使用align-middle和mt-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>