我有一个标签，其中display: inline-flex与span并排。我希望将标签居中，以便其文本的中间与文本的其余部分正确对齐。
Misaligned label
我怎么能这样做呢？我想这是一个常见的问题，因为带标签的文本是相当常见的。
我的代码使用Tailwind类。

<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，因为这会将标签和文本的其余部分分割成单独的部分。我试过使用margin-top和padding-top，但这会稍微改变它，但不是我期望的使用大范围值的方式。
我希望得到以下结果：enter image description here
如果你仔细看，随机用户名应该向下移动几个像素，以符合其余的文本。
编辑：我在标签上使用了float-left，并将文本的其他部分设置为与标签文本相同的行高，这对我的特定用例很有效，但是，如果标签在文本的中间，这就不起作用了。