如何在使用css网格时居中显示内容，并使背景覆盖整栏？

2022-04-02 00:00:00 css css-grid

当我添加此代码时：

place-items: center;

我的元素居中，但只有文本应用了背景色。

当我删除此代码时：

place-items: center;

背景色覆盖整列，但文本不再居中。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px;
  grid-gap: 20px;
  place-items: center;
}

p {
  background-color: #eee;
}

<body>
 <main>
  <p>box1</p>
  <p>box2</p>
  <p>box3</p>
  <p>box4</p>
 </main>
</body>

为什么会发生这种情况？如何将内容居中并将背景颜色应用于整个栏？

解决方案

如果没有place-items: center;，您的网格项目将被拉伸以覆盖所有区域(大多数情况下的默认行为)，这就是为什么背景将覆盖很大的区域：

使用place-items: center;时，您的网格项目将适合其内容，并且它们将放置在中心；因此，背景将仅覆盖文本。

为避免这种情况，您可以将内容放在p(您的网格项目)中，而不是将p居中。不要忘了删除默认页边距以覆盖更大的区域：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px;
  place-items: stretch; /* this is the default value in most of the cases so it can be omitted */
  grid-gap: 20px;
}

p {
  background-color: #eee;
  /* center the content (you can also use flexbox or any common solution of centering) */
  display: grid; /* OR inline-grid */
  place-items: center;
  /**/
  margin: 0;
}

<main>
  <p>box1</p>
  <p>box2</p>
  <p>box3</p>
  <p>box4</p>
</main>

相关文章