Forum Moderators: not2easy
While I have no issue using tables to vertically center my site content, I thought trying to do it without tables and without javascript would be a fun challenge. I have only been able to test it on the most recent browsers (IE7, Opera 9, Safari 3, and Firefox) because I don't know where to download older versions :/, but it seems to work on all of them, thanks to a little filtering.
Also, unlike many of these solutions on the web, my solution does not require you to have a set width/height! I am particularly happy about that :D.
Here was my initial idea - set the line-height to 100% the browser height and then stick a single div in the page with it's vertical align set to middle. Then I would set the line-height inside of the div to normal. This would have worked but I couldn't figure out how, without using javascript, to set the line-height to the proper height.
Then I remembered that by using an image with a vertical-align of middle, you could center text according to the image height! So, I used a transparent 1x1 gif which height was set to 100%. Then I stuck a div next to it with "left:-1px". Of course, div's enter a line-break so I had to switch the display to inline. Newer browsers (besides IE7) treat this as if it were a span tag. However older, less compliant browsers treat the div as normal except that it removes the line-breaks :D. Thus it works for older & non-compliant browsers.
To make it work with newer, compliant browsers I used ID filtering. I used the technique where you use one main div with display:table and a sub div with display:table-cell and I set it's vertical-align to middle. I put these around the existing content div. I used some basic CSS ID settings to hide these. Then, using ID Filtering I made them appear for the newer browsers.
I have yet to test this on older browsers but I believe it should work. Here's my code:
<!-- VCenter.html -->
<!-- Vertically Center a Div! --><html>
<head>
<title> Vertically Centered Div! </title>
<style>
<!--
html
{
width:100%;
height:100%;
}
body
{
width:100%;
height:100%;
margin:0px;
}
body *
{
vertical-align:middle;
}
#valigner
{
height:100%;
width:1px;
}
#container
{
display:inline;
visiblity:hidden;
}
#subContainer
{
/* Must make inline or it pushes the whole thing down */
display:inline;
}
#content
{
display:inline;
visibility:visible;
position:relative;
width:800px;
height:600px;
border: 1px solid black;
left:-1px; /*valigner's width*/
}
#hide
{
display:inline;
visiblity:hidden;
}
div[id="valigner"]
{
display:none !important;
}
div[id="content"]
{
left: 0px !important;
display:block !important;
}
div[id="container"]
{
position: relative !important;
left:-4px !important;
visibility: visible !important;
display:table !important;
vertical-align:middle !important;
width:100% !important;
height:100% !important;
margin:auto !important;
padding:auto !important;
}
div[id="subContainer"]
{
position: relative !important;
background-color:green;
display:table-cell !important;
visibility: visible !important;
width:100% !important;
height:100% !important;
vertical-align:middle !important;
margin:auto !important;
padding:auto !important;
}
-->
</style>
</head>
<body>
<center>
<img id="valigner" align="left" source="invisible.gif" />
<div id="container">
<div id="subContainer"><center id="hide">
<div id="content">
This should be centered despite how far I expand it...
<br><br><br>
And Despite how high I stretch it!
</div>
</center></div>
</div>
</center>
</body>
</html>
It's got a little bit of code in there that probably doesn't need to be there (like margin:auto) but nothing significant. It's a little bulky, but it seems to do the job!
Tell me what you think!
Ryan
Anyways, what do ya all think?
