Horizontal and Vertical Alignment
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)
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
Thanks pistachiomonkey!!
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
Sean Mac said,
July 30, 2008 @ 1:48 am
good stuff. Cheers.
Gian said,
January 10, 2009 @ 9:42 am
I have spent countless hours, browsed a million websites, and even asked old professors. FINALLY, I landed on your information and solved all of my problems. Thank you so incredibly much.
Veera said,
February 19, 2009 @ 8:40 pm
This really helps. Straight and Simple solution. Great work. Thank you!
Anoop said,
May 13, 2009 @ 11:39 am
Thank u ver much..I had been searching for this style sheet for months ..
but couldnt find out yet..
really appreciate ur mentality..
Good work..Keep it up…..
Amy said,
May 30, 2009 @ 6:27 pm
Thank you, thank you, thank you!! I, too, have spent HOURS searching for a solution. None of the other sites helpded, and although I’m sure the other sites’ advice is helpful in certain circumstances, yours was the answer to mine.
Please keep it up, and thanks again!
davenpuerto said,
June 10, 2009 @ 8:39 am
Many many thanks - simple and effective.