How do you center a div?

ablaye · #1 (**permalink**) 04-02-2008, 01:21 AM

Been struggling with this for the last few days.
I have a div section that I would like to have centered on the page.

Code:

<div style="background-color:#EFEDE9; border-top:2px solid #D1D1E1; border-right:2px solid #D1D1E1; border-left:2px solid #D1D1E1; text-align:center;margin:0 auto;">
Want this section to be centered!
</div>

It works fine on IE6 and IE7 but on Firefox, the div does not appear centered.

I tried to include the div code in a table that I had centered but it still did NOT work.
The code:

Code:

<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr><td align="center">
<div style="background-color:#EFEDE9; border-top:2px solid #D1D1E1; border-right:2px solid #D1D1E1; border-left:2px solid #D1D1E1; text-align:center;margin:0 auto;">
Want this section to be centered!
</div>
</td></tr>
</table>

still did NOT get the div centered.

I don't know what else to try.
If anyone has any suggestions, please let me know.

chrishirst · #2 (**permalink**) 04-02-2008, 01:37 PM

http://www.webmaster-talk.com/css-fo...r-website.html

Jacob · #3 (**permalink**) 04-11-2008, 12:01 PM

Hm, I would have said google.com

CSS?

Code:

<style>

div.tag {
text-align:center;
}
</style>

<div style="tag">stuff</dive>

bdude · #4 (**permalink**) 04-12-2008, 04:51 AM

That CSS will just center the text, to center the DIV use:

Code:

div {
margin: 0 auto;
}

Jacob · #5 (**permalink**) 04-15-2008, 12:34 AM

Quote:

Originally Posted by bdude

That CSS will just center the text, to center the DIV use:

Code:

div {
margin: 0 auto;
}

Well then thats where he fucked up too ><

Quote:

Wolverine · #6 (**permalink**) 06-05-2008, 01:35 PM

Cool tips, thanks. I have had to deal with this recently as well.

dvrtmcc · #7 (**permalink**) 07-15-2008, 01:35 PM

This is a tricky question and so simple. IE will not show regular

Quote:

margin: 0 auto

This will work in in all browsers:

Quote:

body {
position:absolute;
left:50%;
margin-left:-293px;

chrishirst · #8 (**permalink**) 07-18-2008, 02:46 PM

Quote:

Originally Posted by dvrtmcc

This is a tricky question and so simple. IE will not show regular

Actually

Code:

margin: 0 auto

works perfectly well in IE from 6 onwards provided you have a FULL, valid doctype

tonyf12 · #9 (**permalink**) 07-25-2008, 06:35 PM

To get it to work in IE older than 6 (and 6 in quirks mode) aswell as modern browsers you will need something like this:

HTML Code:

<div id="outer-container">
<div id="inner-container">

... Your content here ...

</div>
</div>

and the CSS

Code:

.outer-container {
margin:0 auto;
text-align:center;
}
.inner-container {
text-align:left;
}

Older versions of IE (not sure which ones) treat text-align as a general align property.