在响应式放大器旋转木马中寻找垂直居中图像的图案

Question

我有一些使用<amp-carousel type="slides" layout="responsive">的内容 - 个人<amp images>的大小并不相同。旋转木马正确地调整到最大图像的尺寸，我希望垂直居中较小的图像。有没有人想出正确的CSS咒语来在AMP框架内实现这一点？

Answer 1

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