在iframe中居中图像

Question

我有一个iframe <iframe src="preloader.gif" id="graphFrame"...></iframe>。我想将图像置于iframe中心。我曾尝试在线查找解决方案，但没有一个能够正常工作。这可以用简单的css完成吗？如果没有，还有其他解决方案吗？

Answer 1

不，您提供的图片不是HTML页面，因此CSS不适用。

  

它会像预加载器那样行事   图像所以当实际内容加载时   它将叠加在预加载器上   图像

在这种情况下，我建议你：

1. 通过设置使iframe的背景透明 allowTransparency="true"该属性名称在Internet Explorer iirc中区分大小写。
2. 将以下样式应用于iframe：

   background-image: url('preloader.gif');
   background-position: center center; background-repeat: no-repeat;

3. 将src停放在具有透明背景的{html}页面上

   html, body {
     background-color: transparent;
   }

内容加载到iframe后，它将覆盖加载图片。 Working Example

Answer 2

我需要将图像置于iframe中心，我无法让CSS做任何事情，所以我将图像放在一个小的html页面中，而不是加载图像本身，而是在主体标签上添加内联样式填充：0;余量：0;并将其加载到iframe中。完美居中，边缘无边框！

当然，我使iframe的高度和宽度与图像的高度和宽度相同。