Forum Moderators: not2easy
can anyone help me center align an inline frame using css?
iframe {text-align:center;}
doesn't seem 2 work! tho placing it in a div works with
div {text-align:center;}
just wondering if this is what everyone else does?
thanks
Well, since you need to open a new document in the iframe you can just apply the styles in that document instead.
its the actual inline frame i wanna center not its content, would prefer it to move with the browser window if possible. think i'm barking up the wrong tree with text align ...... will hav 2 try positioning
this seems ok
iframe {
width:50%;
height:200;
position:relative;
left:25%;
}
any comments
Your prayers are answered....
Here is a browser centered iframe...
tested in IE 6, Mozilla 1.4 and Netscape 7.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre Iframe</title>
<style type="text/css" media="screen">
<!--
body
{
background-color: #ffffff;
margin: 0px
}
#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -250px; /*half the iframe width */
position: absolute;
top: -150px; /*half the iframe height */
left: 50%;
width: 500px; /* ifame width */
height: 300px; /* iframe height */
visibility: visible
}
iframe.one
{
width: 500px;
height: 300px;
border-style:ridge;
border-width:10px;
border-color:#999999;
padding:1px;
}
//-->
</style>
</head>
<body>
<div id="horizon">
<div id="content">
<iframe class="one" frameborder="0" src="http://www.webmasterworld.com/category10.htm" scrolling="yes">
</iframe>
</div>
</div>
</body>
</html>
birdbrain
