Tailwind CSS 的基础:网格项目的中心对齐?

问题描述

如何在 Tailwind 中使网格项居中对齐，就像我们在 基金会?

基础:

<div class="cell small-4">我在中间</div><div class="cell small-4">我也位于中心</div>

Tailwind CSS 怎么样?在下面的代码中，我还应该从 TW 使用什么?

 
<div class="bg-green-500">1</div><div class="bg-green-500">2</div><div class="bg-green-500">3</div><div class="bg-green-500">4</div><div class="bg-green-500">5</div>

解决方案

Foundation 示例使用的是 flex，而不是 grid……他们的 flex 只是称为 grid.重新创建您从 Foundation 共享的示例将类似于 Tailwind 中的这个 Play 示例.https://play.tai​​lwindcss.com/l6NYNTwPH2 具有 1/3 宽度的 flex 子项.

但是，从您的代码示例看来，您正在寻找居中的 2 行 3 列.在 Tailwind 中，您需要将每组 3 包裹在它自己的 div 中，如果您希望它们水平和垂直居中，最好将 flex 子项的宽度降低到 1/4，因为在 1/3 处它将变为全宽.下面是 https://play.tai​​lwindcss.com/kjfzlD2SA7

的示例

当然，与 CSS 一样，还有许多其他解决方案可以解决这个问题，但这个解决方案与您从 Foundation 分享的方法类似.

How to make the grid items centred align in Tailwind just like we can do that in Foundation?

Foundation:

<div class="grid-x grid-padding-x align-center-middle text-center" style="height: 200px;">
  <div class="cell small-4">I am in the center-middle</div>
  <div class="cell small-4">I am also centrally located</div>
</div>

What about in Tailwind CSS? What else should I use from TW in the code below?

  <div class="grid grid-cols-3 gap-4">
    <div class="bg-green-500">1</div>
    <div class="bg-green-500">2</div>
    <div class="bg-green-500">3</div>
    <div class="bg-green-500">4</div>
    <div class="bg-green-500">5</div>
  </div>

解决方案

The Foundation example is using flex, not grid... their flex is just called grid. Recreating the example you shared from Foundation would look something like this Play example in Tailwind. https://play.tailwindcss.com/l6NYNTwPH2 with the flex children having a width of 1/3.

However, from your code example it seems you're looking for 2 rows of 3 columns centered. In Tailwind you will need to wrap each group of 3 in it's own div and if you want them centered horizontally and vertically dropping the width of the flex children to 1/4 would be best since at 1/3 it will go full width. Here's an example of that https://play.tailwindcss.com/kjfzlD2SA7

Surely there are many other solutions to this problem as always with CSS but this one works similar to what you shared from Foundation.

这篇关于Tailwind CSS 的基础:网格项目的中心对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！