Question

我有以下html页面，其中我在顶部有一个完美对齐的菜单。接下来是一个iframe，它有一些HTML5动画，并且它没有与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>&nbsp; | &nbsp;</td>
            <td><a href="HTML/about.html"> ABOUT US </a></td>
            <td>&nbsp; | &nbsp;</td>
            <td><a href="HTML/service.html"> HR SERVICES </a></td>
            <td>&nbsp; | &nbsp;</td>
            <td><a href="HTML/sport.html"> SPORTS &amp; ENTERTAINMENT </a></td>
            <td>&nbsp; | &nbsp;</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 &copy; 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;
}

Answer 1

您可以使用margin: 0 auto，但首先您必须使用iframe（iframe默认为内联元素）块元素。

iframe
{
   display: block;
   width: yourWidth; // place your width here
   height: yourHeight; // place your height here 
   margin: 0 auto;
}

//感谢编辑建议转到@webeno（css中的评论）

ALIGN =＆＃34;中心＆＃34;不在Firefox和IE中工作

1 个答案: