[UPHPU] More CSS frustration

cole at colejoplin.com cole at colejoplin.com
Tue Jan 16 17:33:25 MST 2007


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





More information about the UPHPU mailing list