I have a "splash screen" to my website, and I'm wanting it centered perfectly on the page. Centering it horizontally is obvious, with the <center> tag, but centering it vertically is ending up being quite a challenge to me.<br />
<br />
Originally, I set a table with height=100% (making itself stretch to the size of the page), and that was that. However, "height" isn't technically a valid HTML attribute, and the problem is that I'm trying to keep my page within the XHTML standards (which pretty much means you can only use valid attributes).<br />
<br />
So, is there any way of doing this with stylesheets or something? Any help would be appreciated.<br />
<br />
<br />
-Case<!--content-->it wont be cross resolution compatible, but i usually just make a bunch of <br> tags<!--content-->Hi there CaseLogic,<br />
<br />
Here is an example of 'Dead Center'<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><br />
<title>Dead Centre</title><br />
<style type="text/css" media="screen"><br />
<!--<br />
body <br />
{<br />
color: white;<br />
background-color: #003;<br />
margin: 0px<br />
}<br />
<br />
#horizon <br />
{<br />
color: white;<br />
background-color: transparent;<br />
text-align: center;<br />
position: absolute;<br />
top: 50%;<br />
left: 0px;<br />
width: 100%;<br />
height: 1px;<br />
overflow: visible;<br />
visibility: visible;<br />
display: block<br />
}<br />
<br />
#content <br />
{<br />
font-family: Verdana, Geneva, Arial, sans-serif;<br />
background-color: transparent;<br />
margin-left: -100px; /*half the image width */<br />
position: absolute;<br />
top: -100px; /*half the image height */<br />
left: 50%;<br />
width: 200px; /* image width */<br />
height: 200px; /* image height */<br />
visibility: visible<br />
}<br />
//--><br />
</style><br />
</head><br />
<body><br />
<div id="horizon"><br />
<div id="content"><br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"your.jpg"alt="dead center image" width="200" height="200"/><br />
<br />
</div><br />
</div><br />
</body><br />
</html><br />
<br />
c
thead<!--content-->Is that the easiest way of doing it within XHTML standards? 
<!--content-->What coothead wrote is pretty much what I got as well. And yes that's the easiest way to do it... and it still won't look good on a Mac! 
You can check <!-- w --><a class="postlink" href="http://www.karinnelegault.com">www.karinnelegault.com</a><!-- w -->. That splash page uses CSS only for the centering.<br />
<br />
HTH<!--content-->or if you're lazy you can use :
<br />
<br />
<table cellpadding="0" cellspacing="0" border="0" style="height:100%; width:100%;"><br />
<tr><td style="text-align:center;vertical-align:middle;"><div style="margin:0 auto;">content</div></td></tr></table><!--content-->
<br />
Originally, I set a table with height=100% (making itself stretch to the size of the page), and that was that. However, "height" isn't technically a valid HTML attribute, and the problem is that I'm trying to keep my page within the XHTML standards (which pretty much means you can only use valid attributes).<br />
<br />
So, is there any way of doing this with stylesheets or something? Any help would be appreciated.<br />
<br />
<br />
-Case<!--content-->it wont be cross resolution compatible, but i usually just make a bunch of <br> tags<!--content-->Hi there CaseLogic,<br />
<br />
Here is an example of 'Dead Center'<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><br />
<title>Dead Centre</title><br />
<style type="text/css" media="screen"><br />
<!--<br />
body <br />
{<br />
color: white;<br />
background-color: #003;<br />
margin: 0px<br />
}<br />
<br />
#horizon <br />
{<br />
color: white;<br />
background-color: transparent;<br />
text-align: center;<br />
position: absolute;<br />
top: 50%;<br />
left: 0px;<br />
width: 100%;<br />
height: 1px;<br />
overflow: visible;<br />
visibility: visible;<br />
display: block<br />
}<br />
<br />
#content <br />
{<br />
font-family: Verdana, Geneva, Arial, sans-serif;<br />
background-color: transparent;<br />
margin-left: -100px; /*half the image width */<br />
position: absolute;<br />
top: -100px; /*half the image height */<br />
left: 50%;<br />
width: 200px; /* image width */<br />
height: 200px; /* image height */<br />
visibility: visible<br />
}<br />
//--><br />
</style><br />
</head><br />
<body><br />
<div id="horizon"><br />
<div id="content"><br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"your.jpg"alt="dead center image" width="200" height="200"/><br />
<br />
</div><br />
</div><br />
</body><br />
</html><br />
<br />
c
thead<!--content-->Is that the easiest way of doing it within XHTML standards? <!--content-->What coothead wrote is pretty much what I got as well. And yes that's the easiest way to do it... and it still won't look good on a Mac! You can check <!-- w --><a class="postlink" href="http://www.karinnelegault.com">www.karinnelegault.com</a><!-- w -->. That splash page uses CSS only for the centering.<br /><br />
HTH<!--content-->or if you're lazy you can use :
<br /><br />
<table cellpadding="0" cellspacing="0" border="0" style="height:100%; width:100%;"><br />
<tr><td style="text-align:center;vertical-align:middle;"><div style="margin:0 auto;">content</div></td></tr></table><!--content-->