如何在 tailwind-css 中水平对齐图像

Question

我很难将图像与带有顺风 css 的子 div 内部的右侧对齐。我尝试了 float-right、right-0 等，但其中 none 成功了。

.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

通常您想在 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 2

当您将 class w-12 添加到父级 div 时，您使网格的右半部分变得非常小。您的图像被限制在 space 内。你可能想要更像 w-full 的东西，尽管由于你的网格布局，这个容器 div 和 float-right 完全多余。您可以删除图像上的 div，并删除 float-right，图像将填充此容器的右侧部分。但是现在它的高度会很大，因此您需要限制容器的高度。一旦你固定了容器高度，然后是其中的图像，你会发现这个位置看起来很奇怪，所以我建议删除网格布局并使用 float-left 和 float-right 如果这与你对该组件的设计需求相适应。即

.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>

Answer 3

下面是使用 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>

结果：

如何在 tailwind-css 中水平对齐图像

How can I align image horizontally in tailwind-css

html

alignment

tailwind-css