Centering a <div>
Posted: Mon Jun 21, 2004 3:14 pm
Hi,
I was playing with Divs and CSS and trying to make a decent looking website.
Here's the problem, I can't figure out how to make a Div with a border around it centered like a table would.
Here's what I mean.
I made a div with the following attributes:
.center{
text-align:center;
position:absolute;
left:50%;
width:300;
height:300px;
border:solid 1px
}
As you can see, the "left" is set to 50%. This doesn't center it because the space from the left of the document to the left of the Div is 50% of the document's width. If it would be centered, the space from the left of the document to the MIDDLE of the div should be 50%.
Sorry if I'm a bad explainer. If you still can't understand what I'm trying to say, try putting this HTML into a web page:
Thanks!
I was playing with Divs and CSS and trying to make a decent looking website.
Here's the problem, I can't figure out how to make a Div with a border around it centered like a table would.
Here's what I mean.
I made a div with the following attributes:
.center{
text-align:center;
position:absolute;
left:50%;
width:300;
height:300px;
border:solid 1px
}
As you can see, the "left" is set to 50%. This doesn't center it because the space from the left of the document to the left of the Div is 50% of the document's width. If it would be centered, the space from the left of the document to the MIDDLE of the div should be 50%.
Sorry if I'm a bad explainer. If you still can't understand what I'm trying to say, try putting this HTML into a web page:
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type-"text/css">
.center{
text-align:center;
position:absolute;
left:50%;
width:300;
height:300px;
border:solid 1px
}
</style>
</head>
<body>
<div class="center">This is a div with Left set to 50%</div>
<br><br><br><br><Br><BR><BR><BR><BR><br><br><br><br><Br><BR><BR><BR><BR>
<table width="300" height="300" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" bordercolor="#000000">This is a table that
is centered</td>
</tr>
</table>
</body>
</html>