The goal is to produce a standard accordion menu, with the requirement that the parent buttons (the big grey ones in the demo below) accomodate up to two lines of text, and that text must be aligned vertically to the middle. Button content may be dynamic, and so text-length is unknown: that means no hackery of providing a class for single-line buttons and a class for multi-line buttons.
As the vertical-align CSS property can only be used on table elements or inline elements, I have set the
button to display:table-cell, and then applied vertical-align:middle;. This produces the desired result.
one
There is a problem with the following accordion in Firefox. The innitial state is correct, however when the buttons are clicked
the subsequent positioning of the buttons is wrong. The button drops to the bottom of the sub-list that is shown when it should stay at the
top. This problem is triggered by using display:table-cell; on the button instead of display:block;.
One fix is to use display:block; but this breaks the rules by meaning the goal of vertically centred text of an
unknown length is unachievable. This bug is not present in Opera 9 or Safari 3.
Quite why the CSS WG decided that vertical-align should apply only to inline elements or table elements is an argument for another day.
Frankly it's a stupid restriction with no rational that I can find (in a similar manner that widow is a print only property.
As though for some reason designers don't need widow control on a screen).
There is an accompanying blog-post on my website where comments can be left.