21 Justify item 对齐项目

不同宽度的特色徽标 示例 21a

我们带着同一个示例的又一种变体回来了。之前我们使用的所有徽标尺寸都大致相同，所以看起来效果不错。但是，如果你添加一些较小或较宽的徽标，就需要将每列中的徽标居中对齐。

在下面的链接中，你可以看到较宽的徽标会增加列的宽度，默认情况下，较小的徽标会对齐到这些列的左侧。使用检查器工具仔细查看实际情况。那么我们如何将这些较小的徽标在列中居中对齐呢？

Try it out

标记

<div class="container grid grid-cols-[repeat(4,auto)] gap-12 justify-between">
  <img ... />
  <!-- Seven more img elements -->
</div>

解决方案

有一个新的实用类可以帮我们解决问题——justify-items-*。

<div
  class="container grid grid-cols-[repeat(4,auto)] gap-12 justify-between justify-items-center"
>
  ...
</div>

Working Demo

理解“justify-items” 概念

如我们所知，CSS 网格创建的布局类似于包含行和列的表格。如果你有使用表格（甚至是简单电子表格）的经验，就会明白向任何一个单元格添加更多内容会使整列变宽。在 CSS 网格中也是如此。而且在这种情况下，该列中的所有其他单元格的内容默认会紧贴在列的左侧。

justify-items-*类实用工具能让我们在列内水平对齐内容，而之前介绍的justify-*类实用工具用于控制整个列的间距。Tailwind 中可用的此类实用工具如下：

Tailwind 类名	CSS 属性及值	解释
justify-items-start	justify-items: start;	所有项目都水平放置在其所在列的起始位置
justify-items-end	justify-items: end;	所有项目都水平放置在其所在列的末尾位置
justify-items-center	justify-items: center;	所有项目都水平放置在其所在列的中间位置
justify-items-stretch	justify-items: stretch;	项目会尽可能拉伸以占据列的全部宽度

注意： 这个属性在 Flexbox 布局中没有意义，因为 Flexbox 中的元素仅在一个方向上进行布局和对齐。

个人简介和链接居中的资料卡片 示例 21b

我们再次来看示例 20a，这次要将所有内容都设置为水平居中对齐。

Try it out

的确，通过对网格项目逐个应用“mx-auto”和“text-center”类可以实现这种效果。但最佳方案是直接对容器应用样式。

标记代码

<div class="card h-96 grid content-between">
  <img .../>
  <p>...</p>
  <a>...</a>
</div>

解决方案

我们可以在容器上使用“justify-items-center”实用工具，将每列中尺寸不同的项目都水平居中对齐。

<div
  class="card h-96 grid content-between justify-items-center text-center"
>...</div>

此外，我们还需要使用“text-center”类来使段落居中对齐。

Working Demo