Horizontal and Vertical Alignment
UPDATE
My original post explains an old process of doing this and overtime i have began using another one which Ian has recently commented about, its much better and simpler!
#wrapper {
/*we need to tell the browser the size of the warpper div*/
width:800px;
height:400px;
/*align the top left corner of the page to the center
of the browser*/
position: absolute;
top: 50%;
left: 50%;
/*offset the page by half the width and height*/
margin-top:-200px;
margin-left:-400px;
/*allow us to see wrapper*/
background-color:red;
}
Here is the old post for refernace
Something i frequently get asked and have managed to do before is Horizontal and Vertical Alingment. I have previously used an old implmentation which got a little starteld when IE7 was released that required 3 div’s to work. This is find is not very efficent and looks heavy and messy.
I was aksed yesterday to build a Flash template for my client Rapier which offerd flash detection and provided an accessible version of the site, for SEO indexing and users without flash. I used the SWFObject methodology to embed the flash, and then went about writing a wrapper to centrally align the flash file.
the XHTML is just one Div:
<div id="wrapper">...</div>
the css is here:
/* wrapper to align center of page */
#wrapper {
/*we need to tell the browser the size of the warpper div*/
width:800px;
height:400px;
/*aligns the page to the center horizontal (x)*/
margin-left:auto;
margin-right:auto;
/*aligns the age to the center vertical (y)*/
position: absolute;
top: 50%;
left: 50%;
/*resets the offset (should be half the width and height*/
margin-top:-200px;
margin-left:-400px;
/*allows us to see wrapper*/
background-color:red;
}
Here is a link to the demo. I have sent this of to Browsershots.org and the results were positive throughout all browsers.
For the Demo i have commented out the Flash embed object so that you can see the wrapper working. Please note that i have also adjusted the CSS here to work with a smaller bassed swf than the one in my lib folder. This is so its easier to see working on smaller screens.
Here is a zipped Download of the full template including SWFObject v1.5.1, as it should be (not modified to show like the demo)
