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

Question

我试图用 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

Answer 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，因为它是多余的。

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

Center text vertically in grid with tailwindcss

html

css

responsive-design

tailwind-css