align="center" not working in Firefox and IE

StackOverflow https://stackoverflow.com/questions/22729704

Question

I have the following html page in which I have a menu at the top which is perfectly aligned. It is followed by an iframe which has some HTML5 animation and it is not aligning to the center in FF and IE, although it is working perfectly fine on Chrome and Safari. I have used the align="center" attribute everywhere required. How can I get the iframe to align itself to the center in FF and IE? Any help is appreciated.

The HTML file: 

<!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>

The CSS file:

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;
}
Was it helpful?

Solution

You can use margin: 0 auto, but at first you have to use iframe (iframe is inline element by default) a block element.

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

// Thanks for edit suggestion goes to @webeno (comments in css)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top