Horizontal and Vertical Alingment

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)

3 Comments »

  1. Robert Shaw said,

    July 24, 2008 @ 8:37 am

    Perfect!!! Just what I have been looking for!

    There is not much useful information about this on google, and when you do find something about it, it mentions the 3 div method which you have mentioned! This is by far a lot simpler way of doing this, and I can’t wait to use it! The only problem is the spelling mistakes in your CSS comments :o

    Thanks pistachiomonkey!!

  2. Nick said,

    July 24, 2008 @ 8:51 am

    Thanks rob, spelling was never my strongest point, just a shame you cant copy and paste on an iphone … yet :)

  3. Sean Mac said,

    July 30, 2008 @ 1:48 am

    good stuff. Cheers.

RSS feed for comments on this post · TrackBack URI

Leave a Comment