Question

我有一些用Lazy Load加载的图像，我必须将它们放在页面中间。

所以我有标准的Lazy Load插件

data-original="img/products/a001.jpg"

加载必须居中的图像

src="img/loading.gif"

也必须集中。

<img class="lazy img-centered img-responsive" data-original="img/products/a001.jpg" src="img/loading.gif" alt="">

我正在使用以下类：lazy img-centered img-responsive with using CSS：

.img-centered {
    margin: 0 auto;
}

.img-responsive {
    display:block;
    width:100%;
    height:auto
}

不幸的是，这些类不能像它们所设想的那样工作，所以我如何在将它们居中的同时懒惰地加载图像？如果可能的话，我更喜欢使用CSS代替JS。

感谢。

Answer 1

根据您的上一条评论，如果您的图片被设置为背景图片，则可以尝试

background-position: 50% 50%;

这应该保持图片的中间与元素的中间对齐