将绝对定位的元素置于CSS Grid中 [英] Centering absolutely positioned element in CSS Grid

问题描述

在Mozilla上，这支笔的工作原理。但是，当我切换到Chrome浏览器时，它就会崩溃。

这只是我或者浏览器出了什么问题？

  .container {height：500px;宽度：500px;背景颜色：米色;显示：网格; grid-template-rows：1fr; grid-template-columns：1fr;}。container h2 {position：absolute; justify-self：center; align-self：center;网格行：1; grid-column：1;}  

< div class = 容器 > < h2> TEXT< / h2>< / div>

$ b codepen LINK

解决方案

看来Chrome已经偏离了这个问题的规范指导。





justify-self align-self properties 应该在网格容器的绝对定位的子元素上工作。

< STRONG> 9.2。将网格容器作为
父母

网格容器的绝对位置的子节点不在流中，
不是网格物品，因此不会影响其他物品
的放置或网格的大小。

绝对的静态位置栅格
容器的位置子元素被确定为它是网格
区域中唯一的栅格元素，其边缘与栅格
容器的填充边缘重合。

注意这个位置受到 justify-self
和 align-self 。

所以，Firefox似乎有这个权利。

对于其他居中选项，请参阅此帖：

• 以CSS网格为中心

On Mozilla this pen works. But when I switch to Chrome it breaks.

It's just me or something is wrong with browsers?

.container {
  height: 500px;
  width: 500px;
  background-color: beige;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}

.container h2 {
  position: absolute;
  justify-self: center;
  align-self: center;
  grid-row: 1;
  grid-column: 1;
}

<div class="container">
  <h2>TEXT</h2>
</div>

codepen LINK

解决方案

It appears that Chrome has deviated from spec guidance on this issue.

The justify-self and align-self properties should work on an absolutely-positioned child element of a grid container.

9.2. With a Grid Container as Parent

An absolutely-positioned child of a grid container is out-of-flow and not a grid item, and so does not affect the placement of other items or the sizing of the grid.

The static position of an absolutely-positioned child of a grid container is determined as if it were the sole grid item in a grid area whose edges coincide with the padding edges of the grid container.

Note that this position is affected by the values of justify-self and align-self on the child.

So, Firefox seems to have this right.

For other centering options see this post:

• Centering in CSS Grid

这篇关于将绝对定位的元素置于CSS Grid中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！