amp-html - 在响应式 amp-carousel 中寻找垂直居中图像的模式

Question

我有一些正在使用<amp-carousel type="slides" layout="responsive">的内容 - 每个人<amp images>的大小都不一样。轮播正确地调整到最大的图像，我想垂直居中较小的图像。有没有人想出正确的 CSS 咒语来在 AMP 框架中实现这一点？

Answer 1

你可以试试这个例子。您需要将图像标签包装在 2 个 div 中。对于.outer-image-wrap，将其设置为display: table, height: 100%, width: 100%。然后对于.inner-image-wrap，将其设置为display: table-cell; 和vertical-align: middle。