求助：如何在Tailwind CSS中实现图标下方文字居中对齐

核心问题在于你把图标、标题、描述拆成了三个独立的水平flex容器，靠手动硬调间距对齐，这种方式既不稳定也不灵活；另外图标间的线条作为独立img插入，破坏了布局的整体结构。

修复思路 #

把每个图标+标题+描述打包成独立的垂直模块，让模块内部自行负责对齐，再在模块之间添加分隔线条，布局逻辑会清晰很多：

1. 每个功能项（图标+标题+描述）用垂直flex布局，内部元素居中，确保文字自然对齐图标下方
2. 分隔线条放在模块之间，避免干扰模块布局
3. 去掉所有硬编码间距值，用flex的空间分配属性控制布局

修改后的代码 #

<div class="bg-black m-40 p-10">
  <!-- 外层水平容器：承载三个功能模块 + 分隔线 -->
  <div class="flex justify-between items-start relative">
    <!-- 第一个功能模块 -->
    <div class="flex flex-col items-center text-center">
      <img src="https://file.rendit.io/n/4Fw6iZv56g6sOmbhDsaj.svg" class="w-24 mb-4" />
      <h3 class="text-3xl font-['Poppins'] font-bold tracking-[-0.56] leading-[30.8px] text-white mb-2">True Representation</h3>
      <p class="text-xl font-['SF_Pro'] tracking-[-0.42] leading-[25.2px] text-white w-64">Negotiations and contracts without the headache</p>
    </div>

    <!-- 分隔线1 -->
    <div class="self-center">
      <img src="https://file.rendit.io/n/UPVGYkobiO5RjR9Leriz.svg" />
    </div>

    <!-- 第二个功能模块 -->
    <div class="flex flex-col items-center text-center">
      <img src="https://file.rendit.io/n/w3IQhkE8ThXPjrMHQ3Dm.svg" class="w-24 mb-4" />
      <h3 class="text-3xl font-['Poppins'] font-bold tracking-[-0.56] leading-[30.8px] text-white mb-2">Accountable</h3>
      <p class="text-xl font-['SF_Pro'] tracking-[-0.42] leading-[25.2px] text-white w-64">You will have professional advice every step of the way</p>
    </div>

    <!-- 分隔线2 -->
    <div class="self-center">
      <img src="https://file.rendit.io/n/CnE2O9Xwja9IAuSpEDpU.svg" />
    </div>

    <!-- 第三个功能模块 -->
    <div class="flex flex-col items-center text-center">
      <img src="https://file.rendit.io/n/XcqMhAwm97kBGlEuLdbV.svg" class="w-24 mb-4" />
      <h3 class="text-3xl font-['Poppins'] font-bold tracking-[-0.56] leading-[30.8px] text-white mb-2">Proven Process</h3>
      <p class="text-xl font-['SF_Pro'] tracking-[-0.42] leading-[25.2px] text-white w-[303px]">This is about you and your home. Let's not make it complicated</p>
    </div>
  </div>
</div>

关键改动说明 #

• 每个功能模块用flex flex-col items-center text-center，确保图标、标题、描述全程居中对齐，直接解决文字与图标错位问题
• 分隔线放在两个功能模块之间，用self-center让线条垂直居中于模块，不会打乱布局结构
• 移除原代码中所有手动设置的gap-[xxx]、mx-24等硬编码间距，改用外层容器的justify-between均匀分配模块空间，布局更稳定
• 模块内部用mb-4、mb-2控制元素垂直间距，逻辑更清晰

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