如何使用 TailwindCSS 将行与换行文本居中对齐？

Question

当行项目中的文本开始变长并换行时，我在使用 TailwindCSS 来对齐

flex-row

中的某些元素时遇到问题。

这是我当前的实现：

<div class="border-1 p-2 flex w-[250px] flex-col items-center rounded border border-solid border-gray-300">
  <div class="flex flex-row">
    <div>UUID</div>
    <div class="ml-2">
      Text
    </div>
  </div>
  <div class="mt-2">
    2023-10-23
  </div>
</div>

如果文本不换行，它会按我想要的方式显示：

https://play.tailwindcss.com/UEGaldW7eo

但是，当文本变大并开始换行时，行（UUID + 文本）不再居中对齐。

我想要的是：

但我无法让它发挥作用。

有什么想法吗？

Answer 1

可能的问题是由于 utrn 中的换行符导致

flex-alignment

。我使用

items-center

和

text-start

类来尝试实现您期望的布局。比如：

div class="flex flex-col items-center text-start">
    <div class="flex flex-row items-start justify-center">
      <div class="pl-4">UUID</div>
      <div class="ml-2">
        Text that is long enough to wrap on 2 lines and more
      </div>
    </div>
  </div>

代码演示