Quartz 4

place-items center 属性详解

4 min read

place-items 属性详解

place-items 是一个 CSS Grid 布局中的简写属性，用于同时设置 align-items 和 justify-items 的值。通过使用 place-items: center;，可以轻松地将 网格单元中的内容居中对齐。

一、place-items 的语法

place-items: <align-items-value> <justify-items-value>;
  • align-items：设置内容在垂直方向上的对齐方式。
  • justify-items：设置内容在水平方向上的对齐方式。

默认值：

place-items: stretch stretch;

单值情况：

当只指定一个值时，两个方向会同时使用该值：

place-items: center;

相当于：

align-items: center;
justify-items: center;

二、place-items: center; 的作用

place-items: center; 会将每个 网格单元中的内容，无论大小如何，同时水平和垂直居中。

三、使用示例

1. 基础示例：简单的居中对齐

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
 
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
    place-items: center; /* 内容水平和垂直居中 */
    background-color: #f0f0f0;
  }
 
  .grid-container div {
    background-color: #ffcccc;
    padding: 10px;
    border: 1px solid #ddd;
  }
</style>

效果：

  • 每个网格单元中的内容被水平和垂直居中。

2. 不同对齐方向

如果需要指定不同的水平和垂直对齐方式，可以分开设置两个值：

place-items: start end; /* 垂直方向顶部对齐，水平方向右侧对齐 */

示例：

<div class="grid-container">
  <div>Top Right</div>
  <div>Top Right</div>
  <div>Top Right</div>
</div>
 
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: 100px;
    gap: 10px;
    place-items: start end; /* 垂直顶部，水平右对齐 */
  }
 
  .grid-container div {
    background-color: lightblue;
    padding: 5px;
    border: 1px solid #ddd;
  }
</style>

3. 与 place-content 的区别

  • place-items：用于 网格单元内 的对齐。
  • place-content：用于 整个网格容器 内的对齐。

例如：

place-content: center; /* 整个网格区域居中 */
place-items: center;   /* 网格单元内内容居中 */

四、常见应用场景

  1. 卡片布局：在网格单元中居中显示文本或图标。
  2. 弹性页面设计：动态调整内容的对齐方式，保持视觉中心。
  3. 复杂组件布局：在响应式布局中，结合其他对齐方式实现灵活定位。

五、浏览器兼容性

  • 完全支持的浏览器：
    • Chrome 57+
    • Edge 16+
    • Firefox 52+
    • Safari 10.1+

可以放心使用，无需特别的兼容性处理。

六、总结

place-items: center; 是 Grid 布局中一个简洁、高效的属性，特别适合用来对 网格单元中的内容 进行快速居中对齐。通过灵活运用它和其他 Grid 属性，可以构建出多样化的现代布局。

建议：多结合实际案例练习，比如卡片布局或弹窗居中，以掌握其灵活性和强大之处！

Graph View