Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Center the contents of an <iframe>

10:28 pm on Oct 9, 2006 (gmt 0)

Junior Member from US 

10+ Year Member

joined:Feb 13, 2005
votes: 0

Hey everyone. Its been a really long time since I last posted on here. Glad to see that the site is still poppin'.

Anyway I was wondering if anyone knows how to center the contents of an <iframe>. I have something like this:

<iframe src="framedpage.htm" frameborder="0" noresize scrolling="auto" marginheight="0" width="100%" height="100%"></iframe>

I setup an iframe for this travel piece we have through one travel and have tried adding a <div align="center"> in the header portion and closing it off in the footer section that I can manage through their ePartner program. But that doesn't seem to do anything. I think I could try "boxing" it in with a table that starts in the header and ends in the footer, but I was hoping to be able to just center the contents of the <iframe> if that was possible.

Hopefully that doesn't confuse anyone, but I'd appreciate any help with this :)

11:54 pm on Oct 9, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
votes: 7

Hi jollygoodfella,

...I was wondering if anyone knows how to center the contents of an <iframe>

The contents of an IFRAME is another HTML document, so in order to center it, you need to center that document. In your case "framedpage.htm". If framedpage.htm centers in the browser, then it will center in your IFRAME.

If, however, you want to center the IFRAME itself on your page, then you are along the right lines with your DIV container. But your IFRAME is already

so there is nothing to center - it already takes up the entire width of the browser.

You need to give it a set width, say 80% or 760px - then you can center it. Although your

<div align="center">
will work, this is deprecated under the HTML4.01 Strict. (Ok, IFRAMEs require a loose DTD anyway, but hey...) An alternative is to use
<div style="text-align:center;">
, or set this in your external stylesheet.

<div style="text-align:center;"> 
<iframe src="framedpage.htm" frameborder="0" scrolling="auto" marginheight="0" width="80%" height="100%">IFRAME not supported!</iframe>

(Just to note, as far as I'm aware, there is no IFRAME attribute called 'noresize' that you have in your original code? Inline frames cannot be resized.)

This seems to work cross-browser... FF, IE6 and Opera8. I must admit, this does seem to go against the grain for FF, as I was expecting

margin:0 auto;
to work on the IFRAME itself, but it does nothing!? Anyone know why?

Just to note, setting

on the IFRAME itself only centers it in IE6, not FF or Opera8.