Position inside of the iframe

HTML & CSS
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!

2

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

3

[QUOTE=xionhack;]… I want the iframe to be in the middle of the site, not to start from the beginning.[/QUOTE]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.


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

Hi Erik, :slight_smile:
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">
<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%;
}
[B]#wrapper[/B] {
    width:900px;
    margin:0 auto;
    padding:0 0 20px;
    background:#777;
    [COLOR=Blue]text-align:center;/*center the iframe*/[/COLOR]
}
[B]iframe[/B]{
[COLOR=Blue]    width:50%;
    height:500px;[/COLOR]
}
</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>
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.

6

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

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.