22 Align Items 对齐项目
图片与文本部分 示例 22a
来自 Inovatik 模板的示例
网页中一个非常常见的部分是，页面左半边是图片，右半边是文本。对于所有大屏幕尺寸，都需要让文本和图片在垂直方向上完美居中对齐。网格布局非常适合处理这类情况。
标记
<section class="container min-h-screen grid grid-cols-2 gap-16">
<img ... />
<div>...</div>
</section>解决方案
使用grid-cols-2，我们创建了两个大小相等的列。通过gap，我们在它们之间添加了一些间距。为了在页面中垂直居中对齐图像和文本，我们需要使用items-*实用类，这与 Flexbox 非常相似。
<section class="container min-h-screen grid grid-cols-2 gap-16 items-center">
...
</section>在这个例子中，使用网格布局（grid）相对于 Flexbox 的优势在于，网格布局的gap属性在更多浏览器中都受支持。其他方面则非常相似。
理解网格布局中的对齐项目 概念
在网格布局中，我们之前观察到，向任何一个单元格添加更多内容会使整个列变宽，同时也会增加该行的高度。在这种情况下，该行中的所有其他单元格的内容默认会紧贴该列的顶部。这就是为什么在我们之前的示例中，当图像比文本高时，文本会对齐到行的顶部；而当文本比图像高时，图像会对齐到行的顶部。
items-*实用类允许我们在行内垂直对齐内容，而之前的content-*属性允许我们控制整行的间距。在讲解 Flexbox 相关概念时，我们已经了解过可用的实用类。这里再次列出，以供参考。
| Tailwind 类 | CSS 属性及值 | 解释 |
|---|---|---|
| items-stretch | align-items: stretch; | 所有项目都被拉伸以填充容器 |
| items-center | align-items: center; | 所有项目都对齐到容器的中心 |
| items-start | align-items: flex-start; | 所有项目都对齐到容器的起始位置（在上述示例中为顶部） |
| items-end | align-items: flex-end; | 所有项目都对齐到容器的末尾位置（在上述示例中为底部） |
| items-baseline | align-items: baseline; | 所有项目的位置都使得基线对齐到容器的末尾（我们很快会讲到这个） |
不同高度的特色徽标 示例 22b
让我们再次看一下相同的示例。到目前为止，我们为所有徽标都使用了固定高度h-10。现在我们将删除该高度，改为添加max-w-[10rem]（查看 CSS 选项卡）。所以现在，所有徽标都有不同的高度和宽度。就像在示例 21a 中我们水平居中对齐每列中的徽标一样，这次我们还需要在每行中垂直居中对齐它们。
标记
<div class="container" justify-between justify-items-center">
<img />
<!-- Seven more img elements -->
</div>解决方案
我们可以使用items-center实用类在每行中垂直居中对齐较高和较矮的徽标。
<div class="container ... justify-between justify-items-center items-center">
...
</div>总结
justify-between用于在水平方向上均匀分布整行内容。
justify-items-center用于在每列中水平居中对齐较小和较宽的徽标。
items-center用于在每行中垂直居中对齐较矮和较高的徽标。