I have a fluid layout consisting of a header and a content area. The header is meant to occupy 10% of the window's height and the content area is expected to occupy the remaining 90%. Text in the entire screen should scale proportionally to the window's height. Also text in the header should be centered vertically. I am able to meet all these requirements except the last one. Anyone know how to do this?
Here's what I have so far: http://jsfiddle.net/nareshbhatia/h2s4h/
I am using Em units to do relative sizing of the text. I use JavaScript to change the font-size of the body element whenever the window is resized. This approach scales the fonts beautifully for the entire window. Finally, I tried to center the header text vertically by setting the line-height of the header to be the same as its height (i.e. 10%). This usually centers the text vertically (when the height is defined in pixels), but in this case the text does not center vertically. Any ideas on how to fix this?
Edit The jsFiddle is updated to show the suggested answer.
The line-height approach centers the text when you only have one line. You are using percentages, so I think this question might help in that respect.
What you could do instead is use some more jQuery or JS to, on load:
Measure the outer height of the paragraph (or whatever element you are using) in the .content
Calculate the bottom offset of this paragraph in relation with the .content (how much space you have remaining from the bottom border of the paragraph to the bottom border of the .content div)
Divide the remainder in two, and add that number as a top margin or top position for the paragraph.
This will let you have longer text without messing with the line-height.
If you want a pure css solution, check these alternative ways of centering vertically.