Place Content 放置内容
用于同时控制内容两端对齐和居中的实用工具。
| Class | Properties |
|---|
基本用法
Center 居中
使用 place-content-center 将项目打包到块轴的中心：
01
02
03
04
html
<div class="grid grid-cols-2 gap-4 place-content-center h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>Start 开始
使用 place-content-start 将项目打包到块轴的起始位置：
01
02
03
04
html
<div class="grid grid-cols-2 gap-4 place-content-start h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>End 末尾
使用 place-content-end 将项目打包到块轴的末尾位置：
01
02
03
04
html
<div class="grid grid-cols-2 gap-4 place-content-end h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>Space between 空间之间
使用 place-content-between 来沿着块轴分布网格项，以便在块轴上每一行之间有相等的空间。
01
02
03
04
html
<div class="grid grid-cols-2 gap-4 place-content-between h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>Space around 围绕空间
使用 place-content-around 来分配网格项，使得在块轴上每一行周围的空间都相等
01
02
03
04
html
<div class="grid grid-cols-2 gap-4 place-content-around h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>Space evenly 均匀空间
使用 place-content-evenly 来分配网格项，使它们在块轴上均匀间隔
01
02
03
04
html
<div class="grid grid-cols-2 gap-4 place-content-evenly h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>Stretch 伸展
使用 place-content-stretch 来沿着块轴拉伸网格项以适应它们的网格区域：
01
02
03
04
html
<div class="grid grid-cols-2 gap-4 place-content-stretch h-48 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
</div>有条件地应用
悬停，焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:place-content-center 只在悬停时应用 place-content-center 实用程序。
html
<div class="grid place-content-start hover:place-content-center">
<!-- ... -->
</div>要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:place-content-center 仅在中等屏幕尺寸及以上应用 place-content-center 实用程序。
html
<div class="grid place-content-start md:place-content-center">
<!-- ... -->
</div>