centering ellements using css?

[Tim]

Does anybody know a way to center a block using just css?

so far the only thing I've found was

Code Select Expand

.block{
     width: 90%;
     margin-left: 5%;
     margin-right: 5^%;
}
but that results in some browser issues...

[Joel]

Margin: auto will center a block element as long as the width is set.

Code Select Expand

.block { width: 90%; margin: auto; }

[Tim]

have you got a working example, because I can't get it to work :-/

[Joel]

Do you have a valid DOCTYPE? If not, the browser will default to tag soup mode (for old and non-standards compliant pages). It also keeps margin: auto from working.

http://www.w3schools.com/tags/tag_doctype.asp

[Tim]

yah, I know how to do valid html

they should really put an align statement in css  

[[Unknown]]

That's something I've always felt was missing from CSS 2.  There's no vertical align and the horizontal one is "text-align" which doesn't fit everything...

-[Unknown]

[Joel]

Here's an example.

[[Unknown]]

Probably only works in IE...

-[Unknown]

[Joel]

Works perfectly fine for me in Mozilla and Opera.

[Tim]

tried it in IE aswell, and it seems to work :-/

[Joel]

I should warn you, however, that IE5 won't like it. Luckily, though, it screws up the CSS standard by horizontally aligning both inline and block elements with text-align. So you'll want to add the following to your stylesheet (I updated the previously linked example to account for this):

Code Select Expand

body { text-align: center; }
body * { text-align: left }


[SparkieGeek]

minor point: the width is 70% not 90%, I was a little scared when it claimed to be 90% wide...

[Seph|roth]

That's something I've always felt was missing from CSS 2.  There's no vertical align and the horizontal one is "text-align" which doesn't fit everything...

-[Unknown]

No vertical align? and what about the property verical-align ?

[[Unknown]]

I'll eat my hat.  I swear I'd looked for that before and not found it.

-[Unknown]

[Seph|roth]

here ya go

http://www.w3.org/TR/REC-CSS2/propidx.html

or

http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

[jack]

The way I read the definition :

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.

is that it affects the alignment of the content of the block, not the position of the block itself.

[[Unknown]]

The same with text-align.  They are both applied to the contents.

-[Unknown]

[Seph|roth]

The same with text-align.  They are both applied to the contents.

-[Unknown]

yes it seems so.. i just encountered the same problem myself