vertical centering of text

[finlander]

www.vintage-adventures.com

From what I've read about CSS, vertical centering of text can be a little tricky. The purpose of this thread is to discuss a solution that allows the tagline text area to 'grow' and 'shrink' if a shopper has a big Zoom or Text Size set in the browser (see my site and try it). This would be similiar to how the very, very bottom of the page grows for the copyright text if a big Zoom or Text Size is set in the browser.

If you look at the text next to my logo in the header, I would like to vertically center this text in the tagline div tag (or in the taglineWrapper div tag) rather than using a little top padding as I have been doing, so that when this div expands, the logo will remain vertically centered, and the text will vertically center on the logo. And then, when the browser setting is normal, the text will simply vertically center on the logo.

I imagine I would also want/need to remove the current 90px height for the logo wrapper, if doing so is necessary for the growing and shrinking. I could set padding on the logo itself to maintain 5px on each side for normal browser viewing.

Does anyone know the simple css properties and values for achieving this? It's just a matter of a couple of div tags remaining vertically centered, w/ a parent div able to expand to accommodate the text as screen resolution and/or browser zoom/text size cause it to expand.

***alternately*** could/should the header be coded, instead, to force horizontal scroll, if needed for large browser Zoom or Text Size?

Thanks...

[finlander]

I give up.

As soon as I remove height: 90px; from my #logowrapper properties, then I am not able to get anything done -- can't middle vert align img using css vertical-align: middle on a new logo id (see below), and of course the green strip below the logowrapper division wants to push all the way up to the bottom edge of the logo if/when the logo is float: left.

If I change logo to vert align middle using a new logo id, and remove the logo id from the list of elements in the css that use float left, then for some reason the text that goes on right side of logo ends up underneath the logo.

Ahhh!

So, I am not knowing what to do once the logowrapper has its height removed, but w/o removing the height, the logowrapper will not expand as needed for text in browser Zoom or large Text Size. There are lots of good, recent tutorials on the internet for coding compliant css vert align for images and div tags, but I seem unable to act on the logo's vert alignment using css. And of course there is the problem of the green strip, from the div after the logo wrapper, wanting to snug up underneath the logo if any wrapping around the logo is allowed.

Argh.

[finlander]

-- okay, things that make me feel stupid --

All I needed to do was put in <br class="clearBoth" /> just before the closing div tag of the logoWrapper div in tpl_header. Then of course remove the 90px height of the logoWrapper in the stylesheet. Voila. ezpages green strip flows after logowrapper, and there is a nice little space between tagline text and ezpages when tagline text runs south of logo.

I also added overflow: auto; to the stylesheet for #tagline, so that text flowing south of logo would stay in a column, so to speak, with the text above it that is right of logo. Voila.

I realized that figuring out how to let the logo drift vertically (maintain a vertically centering within the wrapper) is not the best idea -- it seems better that the logo maintain a fixed position in the upper-left corner of the overall logowrapper.

I still may try to figure out how to vertically center align the text to the right of logo, so that when that text is relatively small, it will it appear centered vertically next to the logo. This may not actually be a good idea, as even smaller text may look better at the top of logowrapper with only the bit of padding to introduce it.