Tailwind CSS响应式布局中实现文字显示在图标下方的方法

嘿，我来帮你搞定这个布局问题！你目前的问题主要出在两个地方：一是给图标加了absolute绝对定位，让它脱离了正常的文档流；二是父容器默认的flex布局是横向排列，所以文字会跟在图标旁边。

只需要做几个简单的调整就能实现图标在上、文字在下的垂直布局，修改后的代码如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="flex flex-wrap mt-4 border-2 border-gray-500 p-8 m-auto w-1/4 items-center justify-center">
  <!-- 新增垂直排列的内部容器，控制图标和文字的布局 -->
  <div class="flex flex-col items-center">
    <div class="fas fa-book-reader text-6xl text-gray-600 mb-2"></div>
    <div class="text-base">Caring Environment</div>
  </div>
</div>

我来拆解一下关键修改点：

• 移除absolute类：绝对定位会让图标跳出正常布局流，不再和文字保持排版关联，所以必须去掉它。
• 添加flex flex-col items-center到内部容器：这个组合会把容器内的元素从默认的横向排列改成垂直排列，同时让图标和文字都水平居中，完美匹配你想要的上下布局。
• 增加mb-2类：给图标底部加一点外边距，让图标和文字之间留出合适的间距，视觉上更协调。

如果不想新增内部容器，也可以直接修改父容器的flex方向，但这样可能会影响父容器的flex-wrap功能，所以用内部容器隔离布局是更稳妥的做法～

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