CSS WG Blog Box Module: the horizontal centering probl…

This is a page from the Cascading Style Sheets Working Group Blog. Some other places to find information are the “current work” page, the www-style mailing list, and the Future of CSS syndicator.

Do you want to know how the CSS WG works? Fantasai has written about:csswg, An Inside View of the CSS Working Group at W3C.

Box Module: the horizontal centering problem

By Bert Bos December 3, 2007 (Permalink)
Categories: general

CSS level 1 introduced two ways to center things horizontally: the
‘text-align’ property centers each line in a paragraph
individually, and ‘auto’ values on the left and right margins of a
paragraph center the paragraph as a whole. People sometimes have
trouble finding the margin properties the first time they are
looking for a way to center a block, but the auto margins fit well in
the box model.

Unfortunately, when we revised CSS level 2, we discovered that many
browsers imposed a limit on what could be centered. In particular,
centering something that was wider than its containing block didn’t
work. The reason, probably, was that the browsers’ scrollbars
were programmed to grow to the right, but never to the left. (See the
illustration.)

screendump
The effect of centering with auto margins.

Indeed, seeing that the majority of implementations had this bug, we
decided to declare it a “feature” instead.

But that means that CSS no longer has a way to center blocks. The
auto margins only work if the inner block is narrower than the outer
one. So how should CSS center all blocks?

  1. Add a new property ‘alignment’ with values ‘center’ and
    ‘auto’.
  2. Ditto with values ‘center’, ‘auto’, ‘left’ and
    ‘right’.
  3. Add a keyword ‘any’ to ‘margin’, which is like
    ‘auto’, but without the size restriction on centered blocks.

The first option complicates the box model, but works reasonably
well with old implementations. If you want to center a block, you can
use: ‘margin: auto; alignment: center’. An
implementation of level 3 would see ‘alignment’ and ignore the
‘auto’ keywords. An older implementation would ignore
‘alignment’ but would still center most boxes.

The second option gives users a single property for all alignments,
but makes the already complex box model even more complex.
‘Alignment’ ignores certain auto values on the margins, and thus,
e.g., ‘width: 20em; margin-left: auto; alignment:
left
’ would align the block to the left. (Currently, that
aligns to the right.)

This option and the first one allow centering and margins.
This has a subtle, but possibly important effect on the preferred size
of centered tables.

The third option avoids adding more properties to the box model and
works well with fallbacks: ‘margin: auto; margin: any
will work in both old and new implementations. (In old implementation
only for narrow boxes, obviously.) On the other hand, after a while,
people may wonder why there is an ‘auto’ keyword that does almost
the same as ‘any’ And, people may make the mistake of trying, e.g.,
line-height: any’.

At this time, January 2008, we believe we do need to add something
to CSS, but we don’t know what yet.

« Previous article Next article »

[Photo: group photo of the CSS working group in Lyon, France] Contact: Bert Bos
Copyright © 2013 W3C®

Last updated 2007-12-03 13:10:59