如何在 tailwind-css 中水平對齊圖像

Question

我很難將圖像與帶有 tailwind-css 的網格的子 div 內的右側對齊。 我試過float-right 、 right-0等，但都沒有用。

 .next-visit { background-color: #7645c1; margin: 5px 1px; border-radius: 15px; padding: 10px; color: #fff; }

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div class="next-visit"> <div class="grid grid-cols-2 gap-4"> <div> <span class="text-sm">Next visit</span> <p class="text-lg font-semibold">19 Oct 2021</p> </div> <div class="w-12"> <img src="https://placeimg.com/640/480/any" class="float-right"> </div> </div> </div>

預期結果

Answer 1

以下是使用 flexbox 的方法：

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div class="flex items-center justify-center min-h-screen"> <div class="flex items-center justify-between h-24 text-white bg-purple-600 rounded-lg shadow-md"> <div class="flex flex-col px-4"> <span class="text-xs text-purple-300">Next visit</span> <p class="text-2xl font-semibold uppercase">19 Oct 2021</p> </div> <img class="h-full py-2 pr-4 ml-8" src="https://placeimg.com/640/480/any"></img> </div> </div>

結果：

Answer 2

通常你想在float 、 grid或flex之間選擇並堅持使用它。 在你的情況下，我可能會像這樣使用flex ：

請注意ml-auto ，它是margin-left: auto ，它使圖像向右移動。

 .next-visit { background-color: #7645c1; margin: 5px 1px; border-radius: 15px; padding: 10px; color: #fff; }

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div class="next-visit"> <div class="flex"> <div> <span class="text-sm">Next visit</span> <p class="text-lg font-semibold">19 Oct 2021</p> </div> <div class="ml-auto w-12"> <img src="https://placeimg.com/640/480/any" class="float-right"> </div> </div> </div>

Answer 3

當您將 class w-12添加到父 div 時，您使網格的右半部分變得非常小。 你的形象被限制在那個空間內。 你可能想要更像w-full東西，盡管由於你的網格布局，這個容器 div 和float-right完全是多余的。 您可以刪除 div，並刪除圖像上的float-right ，圖像將填充此容器的右側部分。 但是現在它的高度會很大，因此您需要限制容器的高度。 一旦您固定了容器高度，然后固定了其中的圖像，您會發現 position 看起來很奇怪，所以我建議刪除網格布局並使用 float-left 和 float-right，如果這符合您對該組件的設計需求的話。 IE

 .next-visit { background-color: #7645c1; margin: 5px 1px; border-radius: 15px; padding: 10px; color: #fff; }

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div class="next-visit"> <div class="h-20"> <div class="float-left"> <span class="text-sm">Next visit</span> <p class="text-lg font-semibold">19 Oct 2021</p> </div> <img src="https://placeimg.com/640/480/any" class="float-right h-full"> </div> </div>