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

问题描述 投票:1回答:1

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

[我们需要将文本放在所述容器的中心,所以我有一个display: grid位于其中的div。这是绝对位置,并使用height: 100%width: 100%

在孩子身上使用align-self: center可以在Chrome和Firefox上完美运行,但并不奇怪,Safari决定不合作。我发现,如果将区域(或网格)设置为设定的高度(即height: 5000px),则实际上它会与div的中心对齐,这使我认为Safari不想将其设为align-self: center且未知尺寸分区。

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

你们知道解决方法吗?

我在这里留下了一个小提琴。如果您在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>
html css safari css-grid centering
1个回答
1
投票

问题是,除非父级的高度已定义,否则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>

更多详细信息:

© www.soinside.com 2019 - 2024. All rights reserved.