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

Posted

技术标签:

【中文标题】如何在tailwind-css中水平对齐图像【英文标题】:How can I align image horizontally in tailwind-css 【发布时间】:2021-07-08 21:30:54 【问题描述】:

我在使用 tailwind-css 将图像与网格的子 div 内的右侧对齐时遇到了困难。我试过float-rightright-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>

预期结果

【问题讨论】:

【参考方案1】:

通常您想在floatgridflex 之间进行选择并坚持下去。在你的情况下,我可能会像这样使用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>

【讨论】:

【参考方案2】:

当您将 w-12 类添加到父 div 时,您会将网格的右半部分设置为非常小的宽度。你的形象被限制在那个空间内。您可能打算使用更像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>

【讨论】:

【参考方案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中水平对齐图像的主要内容,如果未能解决你的问题,请参考以下文章

如何在 PyQt5 中水平对齐中心图像?

在 React 中水平方向对齐图像和文本

无法在打印预览中水平对齐图像

使用 VBA 宏在 Word 中水平对齐(分布)图像

如何在 PagedGridView 中水平对齐中心的加载图标?

如何在反应中水平对齐2行?