【问题标题】:Centering absolutely positioned element in CSS Grid在 CSS Grid 中将绝对定位的元素居中
【发布时间】:2018-01-28 18:35:47
【问题描述】:

这支笔在 Mozilla 上有效。但是当我切换到 Chrome 时,它​​会中断。

是我自己还是浏览器出了什么问题?

.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

【问题讨论】:

    标签: html css css-position css-grid


    【解决方案1】:

    Chrome 似乎在此问题上偏离了规范指南。

    justify-selfalign-self 属性应该作用于网格容器的绝对定位子元素。

    9.2. With a Grid Container as Parent

    一个绝对定位的网格容器的子元素是外流的,并且 不是网格项目,因此不会影响其他项目的放置 或网格的大小。

    一个绝对定位子网格的静态位置 容器被确定为好像它是网格中唯一的网格项 边缘与网格的填充边缘重合的区域 容器。

    请注意,此位置受justify-self 的值影响 和align-self 在孩子身上。

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

    有关其他居中选项,请参阅此帖子:

    【讨论】:

      【解决方案2】:

      position: absolute 正在抛弃 Chrome(在 v62 上测试)。似乎 Firefox 将 justify-selfalign-self 属性解释为覆盖,而 Chrome 没有,因此行为不同。

      只需删除 position: absolute 即可。

      https://codepen.io/anon/pen/vJRmNR

      【讨论】:

      • 所以它基本上是一个 chrome 错误?在这种情况下我需要保持绝对定位:(
      • @KonradAlbrecht 我不知道为什么,你告诉元素绝对定位,但你没有提供其他定位信息(如topleft)。 justify-selfalign-selfposition: absolute相同的事情,因此它们发生冲突。浏览器之间的区别在于它们如何处理冲突。也许您可以完全定位容器 div。
      猜你喜欢
      • 2013-10-21
      • 2017-10-11
      • 1970-01-01
      • 1970-01-01
      • 2018-07-09
      • 1970-01-01
      • 2019-12-11
      • 2013-12-05
      • 2014-10-02
      相关资源
      最近更新 更多