Tuesday August 02, 2005
Centering - Finally Finally I finally implemented support for the HTML <center> tag last night. I had resisted doing that since none of the components are using it, and besides, <center> is a deprecated tag. However, some users have been asking for it - and I discovered that the new Alert component -does- rely on <center>'s evil twin: the align="center" attribute on <table> tags. So I decided to implement it. But don't take this as encouragement to ask for support for the <blink> tag!
If you've read this blog for a while you might remember that I made
a quick attempt at implementing center before. The
"correct" way to
center in CSS is to set the horizontal margin properties to
auto. However, simply aliasing <center> to
auto margins has other side effects, so I backed that change out.
The solution I settled on is what Mozilla seems to be using: a new
internal-only value for the text-align property. In
Mozilla's case it's "-moz-center", and you can see it if you use their
DOM inspector to look at elements inside a <center> tag.
Now, the <center> tag, as well as the align="center"
attribute, will set text-align to -rave-layout,
and the box dimension code looks for this property and handles centering
as you'd expect.
It seems to work - here's my Google test page finally properly centered (click for full size):
You can see how it used to look in
this old blog entry.
Quite a bit already centers simply through use of text-align: center, but notice how
the menu above the textfield is wrong.
