使用tailwindcss在网格中垂直居中文本
Posted
技术标签:
【中文标题】使用tailwindcss在网格中垂直居中文本【英文标题】：Center text vertically in grid with tailwindcss 【发布时间】：2020-12-24 07:58:26 【问题描述】：我尝试使用 tailwindcss 创建响应式网格布局，但无法在网格中垂直居中文本。我所能做的就是用text-center将文本水平居中。
<body>
<div class="grid gap-5 grid-flow-row grid-cols-2 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 text-center ">
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
...
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
</body>
codepen中的演示
【问题讨论】：
【参考方案1】：你可以用 flex 做到这一点。只需将此 flex justify-center items-center 添加到每个文本 div 中，如下所示：
<div class="border-2 rounded-lg h-20 lg:h-32 flex justify-center items-center">Text</div>
这将使它的子容器水平和垂直居中。
您还可以从包装器中删除text-center，因为它是多余的。
【讨论】：
感谢您的回复。现在我看到了这一点，这让我思考为什么我没有想到这一点。自从我最近开始学习 Web 开发以来，我想我仍然需要学习更多。以上是关于使用tailwindcss在网格中垂直居中文本的主要内容，如果未能解决你的问题，请参考以下文章