【问题标题】: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 开发以来,我想我仍然需要学习更多。
    猜你喜欢
    • 2023-01-19
    • 1970-01-01
    • 2013-10-15
    • 2015-09-16
    • 1970-01-01
    • 2011-06-21
    • 2016-06-25
    相关资源
    最近更新 更多