xionhack — 2009-12-25T12:20:33-05:00 — #1
Hello. I have an iframe that the src is a site that doesnt belong to me. I want the iframe to be in the middle of the site, not to start from the beginning. How can I do that?! thanks!
rayzur — 2009-12-25T14:03:27-05:00 — #2
Place the iframe in it's own wrapping div and center it with auto margins as I explained in Your Other Thread.
erik_j — 2009-12-25T15:10:40-05:00 — #3
The iframe is an inline frame and as such it can only be centred by the text-align property on its container.
However, you can give it a block display and then use auto side-margins to centre it.
rayzur — 2009-12-25T17:37:37-05:00 — #4
That makes sense about it being an inline element, I never really even noticed that.
It appears that an iframe is a replaced inline element as well since it is able to take dimensions, similar to an image.
I can't seem to find a detailed list of replaced inline elements.
Would you happen to know where one might be found?
The SP reference makes note of a few of them but does not go into detail with a thorough list.
In this test code below I can set dimensions on the iframe which seem to confirm it as a replaced element.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
padding:0 0 20px;
<font color='Blue'>text-align:center;/*center the iframe*/</font>
<font color='Blue'> width:50%;
<h2>Main wrapping div with text-align:center</h2>
<iframe name="myFrame" src="http://www.rayswoodworks.com/css-demos.html" frameborder="0"></iframe>
erik_j — 2009-12-26T15:12:17-05:00 — #5
Here is the nearest of such list I can recall, it unsorted lists replaced and non replaced inline elements but refers to HTML 4.0 and maybe is not accurate in some statements.
The [iframe element is not a replaced element, it is embedding a document into an inline subwindow. It much acts like the img element though it lacks an intrinsic size, so instead of collapse unset lengths the UA is recommended to use: [URL="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"]300px width and 150px height](http://www.w3.org/TR/html401/present/frames.html#edef-IFRAME).
rayzur — 2009-12-27T14:06:15-05:00 — #6
Erik, Thanks for taking the time to explain and provide links.
xionhack — 2010-01-01T16:58:28-05:00 — #7
Hello. The only thing is that i dont want to position the iframe, but only the information inside of the iframe. I only want to display something that will be in the middle of the iframe.