文章/答案/技术大牛

发布

社区首页 >问答首页 >将文本垂直放置在带有尾风的网格中

问将文本垂直放置在带有尾风的网格中
EN

Stack Overflow用户

提问于 2020-09-05 07:16:52

回答 1查看 4.9K关注 0票数 0

我试图创建一个响应式的网格布局，但我不能将文本垂直地放在网格中。我所能做的就是用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>

码页中的演示

tailwind-css

html

css

responsive-design

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-05 10:00:05

你可以用挠曲来做。只需将此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，因为它将是多余的。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63751431

复制

相似问题

问将文本垂直放置在带有尾风的网格中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将文本垂直放置在带有尾风的网格中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将文本垂直放置在带有尾风的网格中
EN