Though there is a CSS property vertical-align, it doesn’t work like attribute valign in HTML tables. CSS property vertical-align doesn’t seem to be able to solve this problem:

Plain and simple, the CSS veritical-align property really doesn’t work like it should. (Maybe it works to the spec, but it’s not intuitive.) It does not work like a <td>’s valign="middle" attribute, and odds are that’s the behavior you’re trying to emulate when you’re using vertical-align.

Aligning an element vertically within a container of a known height is pretty simple. You can:

• Give the to-be-aligned element margin-top,
• Give padding-top to the container, an sub-container in the larger container, or the to-be-aligned element,
• Use position:relative or position:absolute to slide the aligned element into its desired position.

All this is great. But, what happens when you’re trying to vertical-align against something with a dynamic height? Using vertical-align rarely works as planned, and won’t work if you’re using a block-level element. What do you do?

Vertical Centering in CSS is a solid technique that lets vertical alignment work like it should. I’ve got code using this method in production and, let me tell you, it works very well. Yes, it adds a little extra markup to your document and CSS, but it’s well worth it for the final effect: a vertically centered element without the usual headache. Follow that link and align freely!

technorati tags:vertical-align, css, html

This entry was posted on Thursday, October 12th, 2006 at 4:18 pm and is filed under css, dhtml, learn. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.