如何在TailwindCSS中实现文本换行时flex-row元素居中对齐？

问题场景 #

使用Tailwind CSS的flex-col items-center布局时，内层flex-row中的文本过长换行后，UUID与文本的整体内容块无法保持容器内的水平居中，仅文本未换行时显示正常。

当前实现代码：

<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>

问题原因 #

内层flex-row容器默认是块级元素，宽度占满父容器（250px），文本换行后左对齐，导致UUID与文本的内容块相对于容器看起来左偏移，而非真正的居中。

解决方案 #

将内层的flex flex-row改为inline-flex items-center：

• inline-flex让容器宽度由内容决定，而非占满父容器
• items-center保证UUID与文本始终垂直居中

修改后的代码：

<div class="p-2 flex w-[250px] flex-col items-center rounded border border-gray-300">
  <div class="inline-flex items-center">
    <div>UUID</div>
    <div class="ml-2">
      这里是测试用的超长文本，用于验证换行后的居中效果，确保内容长度足够触发自动换行
    </div>
  </div>
  <div class="mt-2">
    2023-10-23
  </div>
</div>

效果验证 #

• 文本未换行：UUID与文本水平排列，整个内容块在容器内居中，与原预期一致
• 文本换行：整个UUID+文本的内容块保持水平居中，文本换行后左对齐，符合期望的视觉效果

内容的提问来源于stack exchange，提问作者skuallpa