使用tailwindcss在网格中垂直居中文本答案

【问题标题】：Center text vertically in grid with tailwindcss使用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中的演示

【问题讨论】：

标签： html css responsive-design tailwind-css

【解决方案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 开发以来，我想我仍然需要学习更多。