position inside of the iframe

**xionhack** · Dec 25, 2009 11:20

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** · Dec 25, 2009 13:03

Place the iframe in it's own wrapping div and center it with auto margins as I explained in Your Other Thread.

**Erik J** · Dec 25, 2009 14:10

Originally Posted by xionhack;

... I want the iframe to be in the middle of the site, not to start from the beginning.

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.

Code:

iframe{
	display:block;
	margin:0 auto;
}

**Rayzur** · Dec 25, 2009 16:37

Hi Erik,

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.
http://reference.sitepoint.com/css/replacedelements

In this test code below I can set dimensions on the iframe which seem to confirm it as a replaced element.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Iframe</title>
<style type="text/css">
body {
    background: #fff;
    font-size:100%;
}
#wrapper {
    width:900px;
    margin:0 auto;
    padding:0 0 20px;
    background:#777;
    text-align:center;/*center the iframe*/
}
iframe{
    width:50%;
    height:500px;
}
</style>
</head>
<body>

<div id="wrapper">
    <h2>Main wrapping div with text-align:center</h2>
    <iframe name="myFrame" src="http://www.rayswoodworks.com/css-demos.html" frameborder="0"></iframe> 
</div>

</body>
</html>

**Erik J** · Dec 26, 2009 14:12

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: 300px width and 150px height.

**Rayzur** · Dec 27, 2009 13:06

Erik, Thanks for taking the time to explain and provide links.

**xionhack** · Jan 1, 2010 15:58

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.

User Tag List

Thread: position inside of the iframe

Thread Tools

Display

position inside of the iframe

Bookmarks

Bookmarks

Posting Permissions