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)
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.
Hank said,
July 17, 2009 @ 8:35 pm
Hey, when I resize my browser window smaller, it sends the stuff OFF the screen to the left!!! That’s a big problem
once again…why I love the world wide web « Jeff Bach’s Blog said,
August 19, 2009 @ 1:37 pm
[...] common sense filter, I searched for an answer one more time. Without much hope. I found this gem from someone who likes pistachios and monkeys I [...]
bottleHeD said,
August 26, 2009 @ 2:34 pm
This seems like a pretty complicated route to me. I couldn’t get it to work with my 950pxx500px html page.
Here’s what I do to achieve the same results though, and it always works:
(you need to have Macromedia/Adobe Flash installed)
1) Make a document in flash, any size.
2) Goto Publish Settings, check html, and in the html tab, keep the vertical and horizontal flash alignment options to centre & centre.
3) Publish the file. You’ll get an html page where the swf is centrally aligned, and a .js file.
4) Open the html file in notepad of Dreamweaver, and simple replace the flash with your desired code. Voila, centre-aligned! Works with IE, Opera, and Firefox.
Hemant said,
September 12, 2009 @ 12:14 pm
Perfect Pistachio! Perfect! Months long search ends here!
Thank you so much.
Frances said,
January 6, 2010 @ 1:42 pm
I am trying to implement in my html website. I do not get the result I want. Any one know how to do that for html. Thx.
john said,
February 20, 2010 @ 3:02 pm
Thanks so much, worked like a charm
sfw said,
April 17, 2010 @ 3:35 pm
nice one. thank you . good and clean
#000000 said,
April 26, 2010 @ 2:40 pm
If you zoom in, Ctrl + scroll, the scroll bar appears, but you cannot scroll to see all the document.
lily said,
June 6, 2010 @ 8:13 pm
Perfect solution! Thanks a lot for shareing this wonderful solution!
th said,
June 20, 2010 @ 4:01 am
really needed this.
thx
M Sekhon said,
July 2, 2010 @ 12:44 am
Fantastic !!!! Supereb !!! AWesome !!!
Ian Finlayson said,
July 28, 2010 @ 10:46 am
You can make it even 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;
}
Prashanth said,
August 24, 2010 @ 2:35 am
Thanks man You minimized my sleepless nights.