CSS WG Blog Box Module: the horizontal centering probl…

Box Module: the horizontal centering problem

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.)

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 »