如何解决如何在tailwind-css中水平对齐图像
我无法使用 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>
解决方法
通常您想在 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>
当您将类 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>
以下是使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。