css centering horizontal and vertical
I usually work in flash and it’s pretty straight forward to center the content area (horizontal and vertical) for the browser, so I though I’d have a go and try and workout how to do the same with CSS, bare in mind the following CSS is pretty basic but I think it could have a lot of use for sites that only have minimal content and want the page in the center.
So far as I can gather you could only apply this if you know the width and height of the area or have it at set size, in this case I’ve set this for 800 pixels x 600 pixels
heres the css
Code:
#wrapper {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#inner{
background-color:#000000;
position: absolute;
height: 600px;
width: 800px;
margin-top: -300px;
top: 50%;
margin-right: -400px;
right:50%;
}
and heres the html the css is imported to
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="center.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"><div id="inner"></div>
</div>
</body>
</html>
and heres the result
and here it is in use as a landing page for a flash site im currently working on
hope that is of use to someone
Manny2k
Re: css centering horizontal and vertical
is this a question of "how to center in css" ?
well, though I'm quite new to the use of css, i think I can do this one:
Code:
#wrapper {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#inner{
background-color:#000000;
position: absolute;
height: 100%;
width: 100%;
text-align: center;
vertical-align: middle;
}
please correct me if there is anything wrong
Re: css centering horizontal and vertical
Manwe I think you misunderstood me mate, the #inner section is where you start to build your page presuming you want a page that is of a fixed width and height of 800 pixels x 600 pixels and wanted it centred in the browser. It wasn’t a question it was a solution for those who want to center a fixed width and height page both horizontal and vertical.
Manny2k
Re: css centering horizontal and vertical
Quote:
Originally Posted by
manny2k
Manwe I think you misunderstood me mate, the #inner section is where you start to build your page presuming you want a page that is of a fixed width and height of 800 pixels x 600 pixels and wanted it centred in the browser. It wasn’t a question it was a solution for those who want to center a fixed width and height page both horizontal and vertical.
Manny2k
oh ok...my mistake :P
Re: css centering horizontal and vertical
Manny2k,
now that looks complicated. You can get the same result here:
#wrapper {
}
#inner{
background-color:#000000;
position: relative;
margin: 50px auto 0 auto;
height: 600px;
width: 800px;
}
It is the margin settings in the inner block element that set the position. They mean: 50px from the top, automatic calculation of right margin, none on the bottom and auto on the left again. The width of the block element is used by the browser to calculate the "auto" values.
There is no need to do anything with the wrapper. Even I did more than needed by defining it. It just needs to be there.
Juergen
Re: css centering horizontal and vertical
Hi,
This one is without css.but with use of a single table-cell(so you don't have to calculate)
Example is with an iframe but can be anything
<table width="100%" height="100%" border="0" valign="absmiddle">
<tr>
<td><div align="center">
<div id="J392655973WSE24">
<div class="default-style" id="M392655973DOJ30" style="background-color:#333333;top:0px; left:0px; width:792px; height:432px; padding:0;">
<iframe src="blanko.htm" frameborder="0" marginwidth="0" marginheight="0"
style="top:0; left:0; padding:0; width:100%; height:100%;" name="mainframe"scrolling="no" >
<a href="blanko.htm">index.htm</a></iframe></div></td>
</tr></table>
Hans
Re: css centering horizontal and vertical
Haakoo good to know there is more than one way to get things done, good addition to any ones toolbox.
Juergen I’ve changed the css to a 600 x 400 box on your css example and on mine to show you exactly what I mean about dead centre all the time, I think you might have been on a 17 inch monitor when you viewed it so you wouldn’t see what I mean.
Link to my css
Link to your css
resize the browser when veiwing, See the difference ? or have I lost the plot here.
kind regards
Manny2k
Re: css centering horizontal and vertical
Manny2k,
<<I think you might have been on a 17 inch monitor when you viewed it so you wouldn’t see what I mean.>>
no, I simply don't read well at 7am I fear ) I only saw horizontal center. My example shows the box nailed 50px from the top.
I must admit that from memory I can't tell any solution that centers vertically without requiring to calculate size, so your solution does not look complicated anymore regarded that it centers in the viewport.
Juergen
Re: css centering horizontal and vertical
Quote:
I simply don't read well at 7am I fear
damn your lucky to be able to read at 7am, i cant even see the screen at that time let alone read whats on it :)
cheers
manny2k
