Centering Divs on the Page. [Archive]

Click to See Complete Forum and Search --> : Centering Divs on the Page.

Wofen

09-07-2005, 05:05 PM

Hey everyone,

I am trying to set up a page using divs and CSS like the good old table days. Basicly as I said in the title, I want to center a div thats 800px wide, on a page, so that one 800x600 it will take up on all the page, but on 1024x800 it will have 2 nice little columns on the side. The code I want to emulate is this.

<center>
<table>
<tr>
<td> This is in the center of the page</td>
</tr>
</table>

Now, sadly, <center> <div> dont work :(.

Now, I googled it, and everywhere I looked just said to use CSS to center a Div, insted of the <Center> command. its just, no where does it tell you what CSS command to use.Now I might be missing something simple, but its starting to get annoying. Can anyone help me out here, so I can stay away from the tables.

Wofen

drhowarddrfine

09-07-2005, 05:24 PM

Centering (http://www.w3.org/Style/Examples/007/center.html)

Wofen

09-07-2005, 05:41 PM

Thanks for the link, but its not what I am looking for.

I dont want to center text, or anything like that, I want to center the whole div, in the center of the page. So that I will get something like the following command will give you.

<center>
<table>
<tr>
<td>This table cell is in the center of the page</td>
</tr>
</table>
</center>

I want to be able to do that in css.

Wofen

NogDog

09-07-2005, 06:07 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Centered Table</title>
</head>
<body>
<table style="margin: 0 auto; border: solid 2px blue">
<tr>
<td style="border: solid 2px red; padding: 2px 4px">This table should be centered</td>
</tr>
</table>
</body>
</html>

JDM71488

09-07-2005, 06:32 PM

lol to the above...

<div>centered content</div>
div { text-align: center; }
or if you want it a certen width:

div { width: 700px; margin: 0 auto; }
you will need a xhtml 1.0 strict doctype for margin: 0 auto; (possible others, but i know that one works)

NogDog

09-07-2005, 09:00 PM

Sorry, mis-read, thought you wanted to center a table. You probably want JDM's last suggestion: you must give the div a width and then set the left and right margins to "auto" (which, by the way, is explained in the second part of the link drhowarddrfine provided you). Using any HTML 4.01 or XHTML 1.x doctype should be sufficient to get IE out of quirks mode and make it work.