Phosphorus and Lime
A Developer's Broadsheet
This blog has been deprecated. Please visit my new blog at klenwell.com/press.
Sunday, October 16, 2005
HTML: Yet Another Page-Centering Scheme
I find it absolutely ridiculous that there is not a simple way to vertically and horizontally center a page with style sheets. Something in the way of this:
I used to just do it with a table, but that seems to be generally regarded as amateurish or old-fashioned or something among the pundits and doesn't reliably work with validating doctype declarations.
The following is my latest effort as lightweight, valid, two-axis centered page:
It uses a table, but only the one css-styling, and passes as valid XHTML.
body
{
margin:0px; padding:0px;
}
#page_content
{
width:750px;
margin:10px auto;
height:100%;
vertical-align:middle;
}
{
margin:0px; padding:0px;
}
#page_content
{
width:750px;
margin:10px auto;
height:100%;
vertical-align:middle;
}
I used to just do it with a table, but that seems to be generally regarded as amateurish or old-fashioned or something among the pundits and doesn't reliably work with validating doctype declarations.
The following is my latest effort as lightweight, valid, two-axis centered page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>Centered Page Template</title>
<style type="text/css">
<!--
html
{
height:100%;
}
body
{
margin:0px; padding:0px;
height:100%;
}
#centering_table
{
margin:0px; padding:0px;
width:100%;
height:100%;
border:none;
}
#centering_table td
{
position:relative;
width:100%;
height:100%;
vertical-align:middle;
text-align:center;
}
#page_content
{
margin:0px auto;
}
-->
</style>
</head>
<body>
<table id="centering_table"><tr><td>
<div id="page_content">
content here
</div>
</td></tr></table>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>Centered Page Template</title>
<style type="text/css">
<!--
html
{
height:100%;
}
body
{
margin:0px; padding:0px;
height:100%;
}
#centering_table
{
margin:0px; padding:0px;
width:100%;
height:100%;
border:none;
}
#centering_table td
{
position:relative;
width:100%;
height:100%;
vertical-align:middle;
text-align:center;
}
#page_content
{
margin:0px auto;
}
-->
</style>
</head>
<body>
<table id="centering_table"><tr><td>
<div id="page_content">
content here
</div>
</td></tr></table>
</body>
</html>
It uses a table, but only the one css-styling, and passes as valid XHTML.
some rights reserved, © 2006