iframe高度和宽度居中

时间:2012-11-07 15:32:00

标签: html iframe

我正在尝试在水平居中的div中使用iframe。它在Firefox中运行良好,但在IE8中运行不正常。这是我的完整代码:

<!-- <!DOCTYPE HTML> -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head></head>
<STYLE type="text/css">
body {
background-color: silver; } 

#container {
align: right; 
margin: 0;
width: 600px;height: 100%;
margin: 10px auto;
background-color: white; 
}

#top {
height: 300px;
background-color: yellow; }

#midpart { 
width:100%;
height:100%;
background-image:none;
background-color: blue; }

</style>
<body>
<div id="container">
<div id="top">
<iframe src="aa.htm" id="midpart" scrolling="yes" frameborder="1"></iframe>
</div>

</div>
</body></html>

在IE8中,上面的代码生成一个不是水平居中的div。否则就可以了。 iFrame div占据屏幕的约100%。请注意,我使用的是长doctype版本

如果我使用第一个doctype行(短文本行),IE8将div放在中心,但div / iframe高度错误。

还有其他解决方法吗?

3 个答案:

答案 0 :(得分:0)

将以下样式添加到您的身体......

text-align:center;

答案 1 :(得分:0)

你的意思是#container中有'margin:10px auto'和'align:right'吗?

答案 2 :(得分:0)

position:relative;
margin:0 auto;

应该为顶部的id生成一个水平居中的div。您可以使用width和height属性直接在iframe上设置宽度和高度。