Forum:Valign

I have many large and complex tables that I have spent years making.

These table make extensive use of valign and align which are now obsoete.

OK, well thats a pain but the world must progress so I suppose its all for the best.

I assumed that I would just have to look up the new equivalents of each of these obsolete elements and substitute them in.

But no. Its not that simple.

text-align:center evidently acts both horizontally and vertically.

what if I just want one or teh other?

And it only acts on inline elements!

margin:auto has the opposite problem.

It acts on block elemests but if I try to use it to center a child table in the center of a cell of a parent table then it only centers horizontally.

How do I center the table vertically?

Granpa (talk) 05:53, August 13, 2012 (UTC)
 * text-align only aligns horizontally.
 * margin:auto also aligns vertically. You'll have to apply it to the child table, of course.--PedroM (talk) 06:26, August 13, 2012 (UTC)


 * Text-align will only align horizontally and only on inline (or inline-block) elements as you noted; you need  to align a block element, or you can set it to   which will make it obey text-align. IIRC, all tables should, by default, align to the center vertically unless you override it.
 * The replacement for valign is.
 * Documentation is here: text-align vertical-align
 * BTW, the problem you had with  inside a table cell is probably because tables are extremely quirky in HTML (they are the most 'least like everything else' part due to legacy reasons),   won't work the way you expect inside a table cell because of the way cell padding works, it's just weird that way. Lunarity 07:32, August 13, 2012 (UTC)


 * Thanks for the quick responses guys. I am finally getting it to work though I really dont understand it at all.
 * funny thing though. If I use style="vertical-align: text-top;" for a table row then it should only effect inline elements
 * but tables within cells in that row also become vertically aligned to the top of the cell.
 * And whats the difference between  and  ?
 * Granpa (talk) 19:49, August 13, 2012 (UTC)
 * The latter is shorthand for .--PedroM (talk) 21:01, August 13, 2012 (UTC)


 * Note that you can't use any value other than,  ,   or   on a table-cell. The other values can only be used when placed on normal inline/inline-block elements. If you use   on a table cell instead of something like a   then you'll end up with   mode instead which probably isn't what you want (this behaves almost exactly like   did, if you couldn't do something with valign then it probably won't work with   either).


 * You may be misunderstanding how CSS rules are applied; CSS directives will only affect the element they are directly placed on ( attribute or a matching rule in MediaWiki:Wikia.css). Some attributes, like , are special, these are inheritable which means they are automatically copied onto all child elements then their child elements and so on, unless another   is encountered and changes the value (the new value is then inherited by that element's children, etc). Not all CSS attributes are inheritable;   is not inheritable so it will only affect what you use it on, not what is inside it. [This may seem odd at first, but remember that the children are contained within their parent's box, the   directive will change the location of the parent's box which moves the content inside the box (the children) with it. If   was inherited then   would cause this: This is a sup This is a child with inherited super This is a child of the child that also inherited super  which is really not what you want]


 * To improve on PedroM's answer for, some CSS rules are shorthand rules,   is a shorthand rule for  ,  ,   and   (in that order). If you don't give   all four values then it will fill in the ones you didn't specify by duplicating the others.   will set all 4 sides to have a 4px margin.   will set the top and bottom to 4px, and the left and right to 10px.   will set top to 4px, left and right to 10px, and bottom to 5px. As such,   will set left and right to  , and top and bottom to zero. Lunarity 22:47, August 13, 2012 (UTC)


 * Alright, now its starting to make a lot more sense. I've been changing my code all day and it all seems to be working as expected.
 * Thanks for the help. :-)
 * Granpa (talk) 05:50, August 14, 2012 (UTC)