It's been quite tricky for some people to align objects using XHTML Strict, because of the restriction for using the
align attribute. This short tutorial will give you a quick fix to centering your things horizontally and/or vertically on a page.
First, let's design the XHTML. This will be very simple:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering Example</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="centerme">
This text will be centered on the page.
</div>
</body>
</html>
Now we need to work on the CSS, which will actually center the
div element we just created.
You can see that we linked to the stylesheet
style.css in our XHTML file. Create that file:
CODE
.centerme {
border: 1px dashed #CCCCCC;
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
Now that you look at the CSS code, you can realize how simple this actually is. We define a height and width, and position it 50% from the left, and 50% from the top. However, just doing that would make the element
start at 50% of the page. We need to make it already halfway there once it is at 50%. So, to do that, we give the element a negative top and left margin of
half its size.
There you go! Your element should be positioned perfectly in the center of the page. And we did it all within the restrictions of XHTML Strict!
This post has been edited by sandman85048: 24 Oct, 2007 - 02:58 PM
Aligning an Object Horizontally and Vertically on a Page
20 Oct, 2007 - 05:14 PM
|