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

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。