如何在顺风中以自定义高度居中网格行中的元素?
Posted
技术标签:
【中文标题】如何在顺风中以自定义高度居中网格行中的元素?【英文标题】:How to center elements in gird row with custom height in tailwind? 【发布时间】:2021-06-18 19:19:12 【问题描述】:在顺风中,如何在不使用任何填充或边距的情况下将文本 1 垂直和水平放置在中心?我想为两行设置不同的宽度。
<div class="grid grid-row-2 justify-items-center items-center">
<div class="border-2 h-24 "> Text 1 </div>
<div class="border-2 self-center"> Text 2 </div
</div>
https://play.tailwindcss.com/7Zog1vjVEh
【问题讨论】:
【参考方案1】:您可以使用 align-content
类 https://tailwindcss.com/docs/align-content :您可以将 flex flex-wrap content-around
类添加到您的 h-24
元素中,并将您的文本包装在标签之间以使其垂直居中。
<div class="grid grid-row-2 justify-items-center items-center">
<div class="border-2 h-24 flex flex-wrap content-around"><div>Text 1</div></div>
<div class="border-2 self-center">Text 2</div
</div>
https://play.tailwindcss.com/JiPa45W4RR
【讨论】:
谢谢你,澄清一下,这个助焊剂到底在做什么以及它是如何在这里做出改变的?可以分享一些想法吗?【参考方案2】:您的代码中缺少一些类。请参阅下面的正确代码
<div class="grid grid-row-2 justify-items-center items-center">
<div class="border-2 w-24 h-24 justify-center items-center flex">Text 1</div>
<div class="border-2 self-center">Text 2</div>
</div>
我为您创建了一个演示。 https://play.tailwindcss.com/CrUCSx4Fbp
【讨论】:
谢谢你,澄清一下,这个助焊剂到底在做什么以及它是如何在这里做出改变的?可以分享一些想法吗?以上是关于如何在顺风中以自定义高度居中网格行中的元素?的主要内容,如果未能解决你的问题,请参考以下文章