Page 1 of 1

Aligning an Object Horizontally and Vertically on a Page Rate Topic: -----

#1 sandman85048  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 20-October 07

Posted 20 October 2007 - 05:14 PM

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:
<!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:
.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! :D

This post has been edited by sandman85048: 24 October 2007 - 02:58 PM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1