place-content

place-content

用於同時控制內容如何對齊和對齊的工具。

類別樣式

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;

範例

使用 place-content-center 將項目置於區塊軸的中心

<div class="grid h-48 grid-cols-2 place-content-center gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

使用 place-content-start 將項目靠在區塊軸的起始處

<div class="grid h-48 grid-cols-2 place-content-start gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

使用 place-content-end 將項目靠在區塊軸的結束處

<div class="grid h-48 grid-cols-2 place-content-end gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

使用 place-content-between 沿著區塊軸分佈網格項目，使區塊軸上的每一列之間都有相等的空間

<div class="grid h-48 grid-cols-2 place-content-between gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

使用 place-content-around 分佈網格項目，使區塊軸上的每一列周圍都有相等的空間

<div class="grid h-48 grid-cols-2 place-content-around gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

使用 place-content-evenly 分佈網格項目，使它們在區塊軸上均勻間隔

<div class="grid h-48 grid-cols-2 place-content-evenly gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

使用 place-content-stretch 沿著區塊軸上的網格區域延展網格項目

<div class="grid h-48 grid-cols-2 place-content-stretch gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

前綴a place-content 實用程式具有像 md: 這樣的斷點變體，僅在中等螢幕尺寸及以上時應用該實用程式

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

在變體文件中了解有關使用變體的更多資訊。