Centering a <div>

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Yonderknight
Forum Commoner
Posts: 31
Joined: Sun Jun 13, 2004 6:51 pm

Centering a <div>

Post by Yonderknight »

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:

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&#123;
text-align:center;
position:absolute;
left:50%;
width:300;
height:300px;
border:solid 1px
&#125;
</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>
Thanks!
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

try:

Code: Select all

<div align="center"><div class="center">whatever</div></div>
User avatar
johnperkins21
Forum Contributor
Posts: 140
Joined: Mon Oct 27, 2003 4:57 pm

Post by johnperkins21 »

feyd wrote:try:

Code: Select all

<div align="center"><div class="center">whatever</div></div>
You need to change:

Code: Select all

.center&#123;
text-align:center;
position:absolute;
left:50%;
width:300;
height:300px;
border:solid 1px
&#125;
to:

Code: Select all

.center&#123;
text-align:center;
width:300;
height:300px;
border:solid 1px
&#125;
and do as feyd suggegested. Alternatively you could do this:

Code: Select all

<html>
<head>

<style>
.center &#123; 
	text-align:center;
	width:300;
	height:300px;
	border:solid 1px;
        margin-left: auto;
        margin-right: auto;
&#125; 
</style>
</head> 

<body>
<div class="center">This is some text</div>
</body>
</html>
Apparently when both margins are set to auto, they are supposed to end up equal, which in theory should center your div.
Yonderknight
Forum Commoner
Posts: 31
Joined: Sun Jun 13, 2004 6:51 pm

Post by Yonderknight »

Hi,
Thanks, that worked.
I tried putting two divs inside eachother and centering the first one, but I didn't take out the "Position:absolute", so it didn't do anything :).
I just found another problem. though.
Lets say I wanted to make a multiple number of divs centered next to eachother, like they where 1 big div with vertical splits. I tried doing this:

<div align="center"><div class="center>blahblahblah</div><div class="center">123123123</div></div>

Apparantly, when you put two divs right after eachother, it creates the second Div on another line, like a <br>. How can I fix this? Thanks
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

div's are considered blocks, you can change this behaviour with the CSS attribute

Code: Select all

display: inline
/* or */
display: inline-block
Post Reply