CSS Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 244,069 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,336 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Aligning an Object Horizontally and Vertically on a Page

Aligning an Object Horizontally and Vertically on a Page

Options

sandman85048
Group Icon

20 Oct, 2007 - 04:14 PM

Post #1

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!