20 Align Content 对齐内容
带个人简介和链接的资料卡片 示例 20a
假设你需要一个固定高度的个人资料卡片，其中包含个人资料图片、简短个人简介和一个链接，且这三个元素要均匀分布。使用弹性盒模型（flexbox）也能实现这一点，但使用网格布局（grid）的话，所需的实用类会少一个。
标记代码
<div class="card h-96 grid">
<img ... />
<p>...</p>
<a>...</a>
</div>解决方案
对于这个案例，我们只需要一列，所以给.card元素添加grid属性后，会自动创建一个包含一列三行且行高自动的网格。现在我们只需要使用content-*实用类来控制垂直间距。
<div class="card h-96 grid content-between">...</div>理解网格中的align-content 概念
我们已经了解过在 Flexbox 中使用content-*实用类来控制沿交叉轴换行的多个项目之间的间距。在网格布局中，这些实用类用于控制行与行之间的间距。content-between就是我们刚刚使用的实用类之一。可用的实用类与justify-*系列类似。
justify-*实用类用于控制容器内列的位置，而content-*实用类用于控制容器内行的位置。
| Tailwind 类 | CSS 属性及值 | 解释 |
|---|---|---|
| content-start | align-content: flex-start; | 所有行都放置在容器的开头 |
| content-end | align-content: flex-end; | 所有行都放置在容器的末尾 |
| content-center | align-content: center; | 所有行都放置在容器的中心 |
| content-between | align-content: space-between; | 所有行尽可能均匀分布，第一行在开头，最后一行在末尾（我们刚刚看到了这个效果） |
| content-around | align-content: space-around; | 行前和行后的间距是行间距的一半 |
| content-evenly | align-content: space-evenly; | 行前、行后和行之间的间距相同 |
注意：这些实用类仅在以下情况下生效：
- 网格容器的高度值大于各个行高之和。
- 并且没有任何网格项目的高度以
fr单位指定。
页面中心的特色徽标 示例 20b
在示例 19a 中，我们学习了如何在网格中展示徽标并使用justify-between水平间距。现在，如果我们希望徽标所在的行在页面垂直方向上居中显示该怎么做呢？
注意，一旦给容器添加100vh的高度，每一行会拉伸至占据 50%的高度，因此徽标会在垂直方向上分散开。我们需要让它们靠得更近并将其放置在中心位置。是的，这可以通过content-*实用类来实现，因为它可以控制行的位置。
<div
class="container min-h-screen grid grid-cols-[repeat(4,auto)] gap-12 justify-between"
>
<img ... />
<!-- Seven more img elements -->
</div>解决方案
当然有其他方法可以实现，但最简单的方法是同时使用content-center和justify-between。
<div
class="container min-h-screen grid grid-cols-[repeat(4,auto)] gap-12 justify-between content-center"
>
...
</div>一个小变化
现在假设你不希望徽标 logos 在水平方向上有间距，而是希望它们在水平方向上也居中显示。
解决方案
为此，你可以使用justify-center代替justify-between。所以现在代码如下：
<div class="container ... justify-center content-center">...</div>更好的解决方案
<div class="container ... place-content-center">...</div>我们把justify-center和content-center合并成了place-content-center。
理解网格布局中的place-content 概念
place-content-*这些工具类能让你同时控制网格项在块轴（block axis）和内联轴（inline axis）上的间距。不过，只有当你希望行和列的排列方式相同时，这种方法才可行。在前面的例子中，我们希望行和列都位于网格容器的中心位置，所以就可以使用place-content-*工具类。它提供的工具类和justify-*、content-*的工具类类似。