Ongoing Process

For those trying to break away from using tables for layout and do things in CSS, the loss of the valign attribute is a problem.  For some reason, the CSS people never imagined that we’d want to center anything vertically.

You might have tried to use the CSS vertical-align property in your div and discovered it had no effect.  The reason for this is that div is a block element and vertical-align only applies to inline elements.  So we need to use an inline element like span.  But wait, you say, inline elements can’t have a height specified!  Quite so.  But we can emulate height with the line-height property.  So we just wrap the content to be centered in an inline element with a line-height that’s the same as the parent block’s height and presto!

For example:

 It’s a bit of a hack, but what about web design isn’t? 

This entry was posted on Saturday, January 26th, 2008 at 10:02 am and is filed under Geek. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.