Tailwind CSS 在图片下方显示文字

Question

我正在尝试在图像下显示文本以进行响应式设计。现在它显示在图标后面。如何在图标下方显示文字。

  <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=" absolute  fas fa-book-reader text-6xl text-gray-600"></div>
  <div class=" text-base"> Caring Enviroment</div>
  </div>

Answer 1

您需要删除绝对 class

  <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="fas fa-book-reader text-6xl text-gray-600"></div>
  <div class=" text-base text-center"> Caring Enviroment</div>
  </div>

Answer 2

删除绝对值或[=v15=]用相对值替换绝对值。通过这种方式，您可以根据需要定位（前 10 名等）框。

https://play.tailwindcss.com/TU6xLsUjj4

Tailwind CSS 在图片下方显示文字

Tailwind CSS show text under image

css

tailwind-css