如何使 amp-img 垂直居中？

Question

我正在尝试使 <amp-img> 在 div 中垂直居中。

<div class="outer" style="height: 100vh">
  <amp-img class="inner" layout="responsive"></amp-img>
</div>

到目前为止，我已经尝试了这些方法，但它们不起作用：

第一个

.outer {
  display: flex;
  justify-content: center;
  align-items: center; 
}

在这种情况下，图像会消失。

第二

.outer {
  line-height: 100vh
}

.inner {
  display: inline-block;
  vertical-align: center;
}

此外，图像的大小变为 0 x 0 并且图像消失了。

以此类推

其他方法也会使图像消失或无法按预期工作。

有没有办法让 <amp-img> 垂直居中？

Answer 1

您的第一个示例非常接近解决方案：

参见示例：

 .inner{
    flex-basis: 0;
    -ms-flex-preferred-size: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
  .outer {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh
  }

<div class="outer">
    <amp-img class="inner" layout="responsive">your image</amp-img>
</div>

如何使 amp-img 垂直居中？

how can I center amp-img vertically?

html

css

amp-html

第一个

第二

以此类推