...

View Full Version : Centering a DIV tag on the page



jon47
05-08-2006, 08:44 PM
Hello, I have been learning to use DIV tags to control page layout rather than tables. One problem which I cannot seem to overcome is setting a single div tag which spans the entire height of the document to be centered on the page. The code which I am working on is available to view here (http://www.criticallyinsane.com/new/test.html).

I have tried setting the text-align property of the div tag as well as the body tag to be center and this does not seem to work in Firefox or IE. I would really appreciate any help here as I have searched through a number of different forums and tutorials and have not found any solution.

I have also pasted the code below, thank you for any assistance you can render.

document:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">

<head>
<title>criticallyinsane</title>

<link rel="stylesheet" href="include/style.css" type="text/css" />

<img class="preload" src="images/island_mail_on.gif">
</head>

<body>
<div id="body">
<img src="horizon.php">
<div id="links">
<span class="first">
<a href="http://www.criticallyinsane.com:2095/horde/">mail.</a>
</span>
<span class="second">
<a href="http://www.criticallyinsane.com/main.html">go.</a>
</span>
<span class="third">
<a href="http://www.criticallyinsane.com/gallery">gallery.</a>
</span>
</div>
<img src="images/island_mail_off.gif" onMouseOver="this.src='images/island_mail_on.gif';" onMouseOut="this.src='images/island_mail_off.gif';">
</div>
</body>
</html>

stylesheet:

body
{
text-align:center;
height:100%;
width:100%;
}

img
{
border:0px
}

.preload
{
display:none
}

#wrapper
{
height:100%;
width:100%;
text-align:center;
background-color:white;
}

#body
{
position:absolute;
text-align:center;
top:0px;
left:0px;
width:640px;
height:100%;
background-color:#1767EB
}

a
{
color:white;
text-decoration:none;
}

a:hover
{
background-color:red
}

#links
{
padding-top:50px;
padding-bottom:50px;
font-family:arial;
color:#FFFFFF;
font-weight:bold;
vertical-align: bottom;
text-align:center;
}

.first
{
position:absolute;
left:100px;
}

.second
{
position:absolute;
left:300px;
}

.third
{
position:absolute;
left:480px;
}

VIPStephan
05-08-2006, 08:50 PM
Since divs have a width of 100% by default you can't actually see that it is centered when you center it so you have to assign a width to that div and then apply margin: 0 auto; to it. The first value applies a top and bottom margin (here "zero" - can be changed if you want/need) and the second value ("auto") is for left and right margins.

General note: Block elements (like <div>, <ul>, <p>...) or elements set to display: block; are centered with the method above, inline elements (like <img>, <a>, <span>...) or elements set to display: inline; can only be centered with text-align: center; assigned to their parent element.

jon47
05-08-2006, 09:03 PM
Thank you Stephen, that fixed my problem. I really appreciate your reply!

Jon



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum