iframe 不会以移动设备为中心？答案

【问题标题】：iframe won't center on mobile devices?iframe 不会以移动设备为中心？
【发布时间】：2013-11-18 04:33:00
【问题描述】：

我的 iFrame 没有以移动设备为中心。我必须将宽度定义为 1250 像素，否则它只会在桌面上显示 iFrame 的一小部分。我真的需要黑边在手机屏幕上消失...

http://www.howlatthemoon.com/birthday-parties-chicago

（我必须使用 iFrame，因为我的 CMS 已经过时了，它不适用于此代码。我只会隐藏边缘的黑色渐变，但 CMS 不会响应媒体查询）

iframe, object, embed {
 max-width: 100%;
}

#midslide {
    clear:right;
margin-top: -47px;
position: relative;
overflow: auto;
margin-left: auto !important;
margin-right: auto !important;
width:1250px;
height:338px;
}


.center{
margin-left: auto;
margin-right: auto;
display: block;
width: 100%; 
}



<iframe scrolling="no" frameborder="0" id="midslide" align="middle" src="http://www.howlatthemoon.com/images/howl/landing/birthday-parties/slider2.html"></iframe>

感谢任何可以提供帮助的人！

【问题讨论】：

标签： jquery html css mobile iframe

【解决方案1】：

试试这个

#midslide {
    clear: right;
    height: 400px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: -47px;
    overflow: auto;
    position: relative;
    width: 100%;
}

【讨论】：

不走运，它不会以这种方式居中，而且无论如何它在移动设备上也不起作用。

【解决方案2】：

您的问题不是 css，而是您的左/右黑色渐变图像。左边是具体的，它将所有滑块推到右边，所以无论你在 css 中做什么，你仍然会得到一个左边的黑色蒙版图像。这样做没有错，而且我可以理解为什么您需要为桌面访问者使用它，但是您可以以更好的方式做到这一点，而不是将它们包含在您的内联 HTML 代码中，您可以设置左/右填充/滑块 div 的边框。即使您确实想像现在这样嵌入它们，也要正确地做。显然左边的图像在滑块之外，而右边的图像被包裹在里面。这就是你遇到的问题。
好家伙，希望这会有所帮助。

【讨论】：