iframe 高度和宽度居中答案

【问题标题】：iframe height and width centeringiframe 高度和宽度居中
【发布时间】：2012-11-07 23:35:24
【问题描述】：

我试图在水平居中的 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 行（短的）IE8 将 div 居中，但 div/iframe 高度是错误的。

还有其他解决方法吗？

【问题讨论】：

标签： html iframe

【解决方案1】：

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

text-align:center;

【讨论】：

谢谢！ “文本对齐：中心；”做到了。

【解决方案2】：

您的意思是在#container 中有“margin: 10px auto”和“align:right”吗？

【讨论】：

【解决方案3】：

position:relative;
margin:0 auto;

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

【讨论】：