Centering horizontal rules with CSS

[chuckee]

Hi,
I am not sure why, but my horizontal rule is not centered on my page. Anyone have any ideas about how to center it?

Here is the horizontal rule:
<div class="greyRule"><hr /></div>

Here is the CSS code:
.greyRule {
background: #CECECE;
width: 600px;
height: 1px;
padding: 0;
position:relative;
margin: 15px;
}

.greyRule hr {
display: none;
}

Thanks!

[Setek]

If you have a full and correct doctype (so that IE is running in standards-compliance mode, not quirks mode) you can simply change your margins to this:

.greyRule {
background: #CECECE;
width: 600px;
height: 1px;
padding: 0;
position:relative;
[5]margin: 15px auto;[/5]
}

Which will automatically adjust the margins on the left- and right-hand side to suit.

If you are running IE in quirks mode, you will have to have a containing element to your

.greyRule

which has

text-align: center;

on it (which will only work for IE, so you will still require the

margin: 15px auto;

for standards-compliant browsers.

[chuckee]

Thanks Setek, I have sent you a private message.
Cheers!

[Setek]

No problem chuckee, glad to be of help :)