Centering a <div>

[CMAR]

To center my <div>, I am currently using something like
<div id="navcontainer" align="center">
This centers fine, but is deprecated code. I have seen these two solutions
recommended.

1)

body {
text-align: center;
min-width: 500px;
}
#wrapper {
position: relative;
text-align: left;
width: 500px;
margin-left: auto;
margin-right: auto;
}

This will undoubtedly work, but unfortunately centers text in the entire
page. And you can't use "text-align: center" in a <div>
2)
Centering a block with a width of 60% and a height of 30%:

..centerblock {
position: absolute;
width: 60%;
height: 30%;
left: 20%;
top: 35%;
}

I tried this one but it does not work for me. It does not center the <div>,
so I am stuck with deprecated coded, unless someone has a solution.

Thanks, CMA

[David Dorward]

CMAR wrote:

To center my <div>, I am currently using something like
<div id="navcontainer" align="center">
This centers fine, but is deprecated code.

http://dorward.me.uk/www/centre/#block (noting the bugs it describes in IE,
and the various work arounds)

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>

[Steve Pugh]

"CMAR" <cm***@yahoo.com> wrote:

To center my <div>, I am currently using something like
<div id="navcontainer" align="center">
This centers fine, but is deprecated code. I have seen these two solutions
recommended.

1)

body {
text-align: center;
Only needed by IE5- (and IE6 if you trigger quirks mode)
min-width: 500px;
Not needed.
} #wrapper {
position: relative;
Not needed.
text-align: left;
If you have this, then you shouldn't have the problem described below.
width: 500px;
margin-left: auto;
margin-right: auto;
This is the correct way of centering a block element and works in
modern browsers.
}

This will undoubtedly work, but unfortunately centers text in the entire
page.
So set text-align:left; on the child elements, just like you did
above.
And you can't use "text-align: center" in a <div>
Yes you can. It centers the content of the div, exactly as it's
supposed to.
2)
Centering a block with a width of 60% and a height of 30%:

.centerblock {
position: absolute;
width: 60%;
height: 30%;
left: 20%;
top: 35%;
}

I tried this one but it does not work for me. It does not center the <div>,
so I am stuck with deprecated coded, unless someone has a solution.

That will center it horizontally. (But width: 60%; margin-left: 20%;
margin-right: 20%; is simpler.)

Vertically it might work depending on the height of the parent
element.

The two bits of code you've given are very different, what are you
actually trying to do?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[CMAR]

"David Dorward" <do*****@yahoo.com> wrote in message
news:c8*******************@news.demon.co.uk...

CMAR wrote:

To center my <div>, I am currently using something like
<div id="navcontainer" align="center">
This centers fine, but is deprecated code.
http://dorward.me.uk/www/centre/#block (noting the bugs it describes in

IE, and the various work arounds)

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>

Thanks to David and Steve for the very useful posts.
David, I was able to use your code with some modification and tweaking to
get the centering I want. It looks good in IE6. I assume that it will also
be centered in IE5 and IE5.5, since that was the whole purpose of the
exercise.

<div style="text-align:center;">
<div id="navcontainer">
<ul id="navlist">
<li><a href="mailto:xy*@efg.com" title="Send email">Email</a></li>
<li><a href="order.htm" title="orders">To Order</a></li>
<li><a href="index.html" title="Homepage">Home</a></li>
</ul>
</div>
</div>

The relevant style is
#navcontainer {background-color: #FF8040; margin-left: auto; margin-right:
auto;
padding-top: .45em; width: 100%;}