html - align-self 不对齐 Safari 中高度为 100% 的容器中的内容

问题描述

我有一个包含图片标签的部分。图片标签是使用 srcSet 图像来完成的，用于响应式设计并使用多张图片，而无需下载未使用的图片。

我们需要将文本放在所述容器的中心，所以我在display: grid里面有一个 div。这是绝对定位并使用height: 100%and width: 100%。

在孩子上使用align-self: center在 Chrome 和 Firefox 上完美运行，但不出我所料，Safari 决定不合作。我发现，如果我将部分（或网格）设置为设定的高度（即height: 5000px：），它实际上会将自身与 div 的中心对齐，这让我认为 Safari 不想要align-self: center和未知大小的 div。

有多种方法可以解决这个问题，但我们使用我们自己的使用网格的库，这就是为什么我想使用它来解决它，align-self: center因为我们可以将 prop 传递给 React 组件。

你们知道解决方法吗？

在这里，我留下了一个小提琴。如果您在 Chrome 或 Firefox 上访问它，它可以工作，但如果您在 Safari 上访问它，它不会。我还评论了一行，我在其中设置了一个特定的高度，以证明它适用于 Safari。

谢谢！

.container {
  position: relative;
}

.grid {
  position: absolute;
  height: 100%;
  /* height: 1000px; */
  width: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.75);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.cell {
  grid-column: 1 / span 1;
  align-self: center;
}

img {
  width: 100%
}

<div class='container'>
  <img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
  <div class='grid'>
    <div class='cell'>
      Hello
    </div>
  </div>
</div>

标签： htmlcsssafaricss-gridcentering

问题是 Safari 不能识别百分比高度，除非父级具有定义的高度。那是老式的 CSS。其他浏览器已经超越了该要求，现在接受其他百分比高度参考。

因此，如果您要在上使用百分比高度.grid，则父级需要固定高度才能在 Safari 上工作。或者，在祖先元素上设置百分比高度，一直到根元素。

/* NEW */
html, body, .container, img {
  height: 100%;
}

.container {
  position: relative;
}

.grid {
  position: absolute;
  height: 100%;
  /* height: 1000px; */
  width: 100%;
  top: 0;
  background-color: rgba(255, 255, 255, 0.75);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.cell {
  grid-column: 1 / span 1;
  align-self: center;
}

img {
  width: 100%
}

<div class='container'>
  <img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
  <div class='grid'>
    <div class='cell'>
      Hello
    </div>
  </div>
</div>

更多细节：

html - align-self 不对齐 Safari 中高度为 100% 的容器中的内容

问题描述

解决方案

推荐阅读