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来完成。只需将> length(mod.2$y) [1] 146 > length(mod.2$fitted.values) [1] 146 >添加到每个文本div中，就像这样：

flex justify-center items-center

这将使其成为具有水平和垂直居中位置的子代的伸缩容器。

而且您也可以从包装器中删除<div class="border-2 rounded-lg h-20 lg:h-32 flex justify-center items-center">Text</div>，因为它将是多余的。

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

1 个答案: