我有以下 html 页面，其中顶部有一个完全对齐的菜单。它后面是一个带有一些 HTML5 动画的 iframe，它没有与 FF 和 IE 中的中心对齐，尽管它在 Chrome 和 Safari 上运行得很好。我在所有需要的地方都使用了 align="center"属性。如何让 iframe 与 FF 和 IE 中的中心对齐？任何帮助表示赞赏。
HTML 文件:
<!DOCTYE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/style_all.css" />
</head>
<body align="center">
<table align="center" id="menu">
<tr>
<td><a href="index.html"> HOME </a> </td>
<td> | </td>
<td><a href="HTML/about.html"> ABOUT US </a></td>
<td> | </td>
<td><a href="HTML/service.html"> HR SERVICES </a></td>
<td> | </td>
<td><a href="HTML/sport.html"> SPORTS & ENTERTAINMENT </a></td>
<td> | </td>
<td><a href="HTML/contact.html"> CONTACT US </a></td>
</tr>
</table>
<center>
<table width="100%" align="center" style="margin: 0 auto; text-align: -moz-center;" align="-moz-center">
<tr>
<td height="100%">
<iframe frameborder="0" scrolling="no" src="HTML/homepage.html" width="100%" height="600px"> </iframe>
</td>
</tr>
</table>
</center>
<table width="100%" align="center">
<tr>
<td align="left">
<p> Copyrights © HUMAN CAPITAL RESOURCE </p>
</td>
<td align="right">
<p>Created by <a href="http://www.pentafuse.com" target="_blank" id="penta"> PENTAFUSE INDIA PVT LTD </a> </p>
</td>
</tr>
</table>
</body>
</html>
CSS 文件:
a
{
text-align:center;
font-size:16pt;
color:white;
}
body
{
background-image: url('../Media/bgimage.jpg') ;
}
a
{
text-decoration:none;
}
a:hover
{
color:#646464;
}
p
{
color: white;
font-size: 10pt;
}
html, body
{
margin: auto;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
table
{
vertical-align:center;
vertical-align:-moz-center;
margin: 0 auto;
}
最佳答案
你可以使用margin: 0 auto，但是首先你必须使用iframe(iframe默认是行内元素) block 元素。
iframe
{
display: block;
width: yourWidth; // place your width here
height: yourHeight; // place your height here
margin: 0 auto;
}
//感谢@webeno 的编辑建议(css 注释)
关于css - 对齐 ="center"在 Firefox 和 IE 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22729704/