Re: align property

On Wed, Jan 26, 2011 at 7:34 AM, Mark Kenny <beingmrkenny@gmail.com> wrote:
>> I understand there is always other way around something to achieve
>> what we need, but why not simply use logical solutions instead of
>> those "workarounds"?
>
> Actually, I think that's quite a fair point. I still don't quite like
> margin: 0 auto; though I use it all the time -- horizontal-align: center;
> would make much more sense.

You're right.  Horizontally centering a box in CSS has always been
more painful than it should be.  Vertically centering a box has always
been *much* more painful than it should be.


> I also never got why vertical-align: middle; never worked like you'd expect
> it to work. Can anyone shed any light on that? Seems a shame that CSS should
> be worse (less elegant) than the old HTML valign attribute.

'vertical-align' is about aligning text and other inline elements
within a line.  That's why it doesn't have anything to do with the
ordinary block layout model - the inline layout model is completely
different, and 'vertical-align' is limited to only it.

Unfortunately, the table layout model reuses the 'vertical-align'
property with some of the values to achieve a more useful type of
vertical alignment, similar to how you'd think it works in the block
layout model.  This causes a lot of confusion for authors, but it's a
legacy mistake that we are definitely stuck with.


> It's too late to change the defintions now, but is there something in CSS3
> coming that will allow vertical aligning for block elements in one
> declaration?

Yes, the flexbox layout model makes this a lot easier.  Flexbox is
simpler than block layout, and gains the complexity back by allowing
more powerful alignment primitives.  I'm rewriting this spec right
now, but if we pretend that my current syntax is what we'll be stuck
with, you can do vertical alignment like this:

<div style="display:flexbox;">
  <div style="margin: 1fl 0;">I'm vertically centered!</div>
  <div style="padding: 1fl 0;">I fill the space, but my contents are
vertically centered!</div>
</div>

You can do horizontal alignment like what <center> does like this:

<div style="display:flexbox; flex-direction:tb;">
  <div style="margin: 0 1fl;">I'm horizontally centered, no matter
what my width is!</div>
</div>

Flexbox should make this all very simple.

~TJ

Received on Wednesday, 26 January 2011 17:33:42 UTC