我想這樣做：
但是我的影像保留在 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>
uj5u.com熱心網友回復：
您彎曲了包裝器 div，因此默認情況下它似乎已將專案排成一行。使用“flex-col”旁邊的以便將您的專案放在一列中。
uj5u.com熱心網友回復：
正如@xavi3r 提到的，您需要使用flex-col，作為提醒，Tailwind 使用移動優先斷點，因此您需要設定其中一個斷點以將其更改為適用于大型設備的行，如下所示lg:flex-row或任何其他斷點！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/384462.html
上一篇：Bootstrap5-網格系統-如何垂直拆分頁面（2個垂直獨立行、列或容器）
下一篇：轉換：翻譯不能按預期使用視口單位