Tailwind 中图片背后的文字 CSS

Question

我想这样做：
但是我的图像留在 div 的右侧，就像这样：
所以我不知道为什么会这样，这是我的代码：

<div class="flex h-full justify-center items-center">
        <div>
            <h2 class="font-bold text-2xl text-gray-700">Page Not Found ‍♀️</h2>
            <h3 class="mt-3 text-gray-500">Oops!  The requested URL was not found on this server.</h3>

             <div class="lg:grid justify-center mt-4">
          <BreezeButton
            class="
              inline-table
              w-full
              items-center
              bg-purple-600
              text-white text-xs
              font-bold
              hover:bg-purple-600 hover:shadow-purple
              mt-3
            "
            :href="route('dashboard')"
          >
            Back to home
          </BreezeButton>
        </div>
        </div>
        <div>
        <img src="../../Assets/Img/error404.svg" alt="" />
        </div>
      </div>

Answer 1

您调整了包装器 div，因此它似乎默认将项目排成一行。在旁边使用“flex-col”，以便将您的项目放在一列中。

Answer 2

正如@xavi3r 提到你需要使用flex-col，作为提醒，Tailwind 使用移动优先断点，因此你需要设置其中一个断点以将其更改为大型设备的行，如下所示lg:flex-row 或任何其他断点!!

Tailwind 中图片背后的文字 CSS

Text behind image in Tailwind CSS

css

tailwind-css