放置内容

类	属性
place-content-center	place-content: center;
place-content-start	place-content: start;
place-content-end	place-content: end;
place-content-between	place-content: space-between;
place-content-around	place-content: space-around;
place-content-evenly	place-content: space-evenly;
place-content-baseline	place-content: baseline;
place-content-stretch	place-content: stretch;

基本用法

¥Basic usage

中心

¥Center

使用 place-content-center 在方块轴的中心打包物品：

¥Use place-content-center to pack items in the center of the block axis:

<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 将项目打包到块轴的起点：

¥Use place-content-start to pack items against the start of the block axis:

<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 将项目打包到块轴的末端：

¥Use place-content-end to to pack items against the end of the block axis:

<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 沿块轴分布网格项，以便块轴上每行之间的间距相等。

¥Use place-content-between to distribute grid items along the block axis so that that there is an equal amount of space between each row on the block axis.

<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 分布网格项，使块轴上每一行周围的空间量相等：

¥Use place-content-around distribute grid items such that there is an equal amount of space around each row on the block axis:

<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 分布网格项，使它们在块轴上均匀分布：

¥Use place-content-evenly to distribute grid items such that they are evenly spaced on the block axis:

<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 沿块轴上的网格区域拉伸网格项：

¥Use place-content-stretch to stretch grid items along their grid areas on the block axis:

<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 仅在 hover 时应用 place-content-center 工具。

<div class="grid place-content-start hover:place-content-center">
  <!-- ... -->
</div>

有关所有可用状态修饰符的完整列表，请查看悬停、聚焦、以及其他状态文档。

断点和媒体查询

你还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗黑模式、首选减少运动等。例如，使用 md:place-content-center 仅在中等屏幕尺寸及以上时应用 place-content-center 工具。

<div class="grid place-content-start md:place-content-center">
  <!-- ... -->
</div>

要了解更多信息，请查看有关响应式设计、暗黑模式、以及其他媒体查询修饰符的文档。

Quick reference