Hi All,
> Second, vertical-align _does_ work in all major browsers, but AFAIK only
> when applied to a table cell. So if you have a table cell and tell it
> to be vertical-align: middle; it will do what you intended. The
> simplest way in this case, even though it seems a bit of a waste, would
> be to make a single-celled table (one row, one column) that is the size
> of the area in which you want the title centered.
The above is true, but the table is now hanging out there in the
markup (sigh). There is another alternative to consider. It's not as
*pure* as I would like, but it works in FF/IE6/IE7, and isn't a
complete mess. So if forced, I'd probably consider the following
example:
<div style="border: 1px solid black; display: table; height: 400px;
#position: relative; overflow: hidden;"><div style="#position:
absolute; #top: 50%;display: table-cell; vertical-align: middle;"><div
style="border: 1px solid blue; #position: relative; #top: -50%;
"><h1>Big text</h1><h2>Adjustable height</h2> </div></div></div>
Anyone else have any ideas? I'd love to read them.
-- Cole