Vertical Alignment with Cascading Style Sheets

Posted September 27th, 2006

It’s not often that you’ll hear me say I miss something about designing with tables. Cascading style sheets have made my markup cleaner, slimmer, and much easier to maintain. And, for the most part, designing with CSS has been a blast. I can’t believe I actually resisted moving to CSS for a while. But, there’s one attribute from the good old td tag that I sorely miss — valign. I used to find it very annoying that valign would always default to middle and that, for the most part, I’d have to go through every table cell and set valign="top". Now that I’ve moved to a complete CSS workflow, there’s no valign and, to be honest, I kind of missing the little guy. So, I decided to bring the power of valign to the twenty-first century.

It’s actually not as hard as you might think to set vertical alignment in CSS. Say we had some HTML that looked like this.

<html>
	<body>
		<div id="container">
			<div id="element">valign me</div>
		</div>
	</body>
</html>

And that HTML was styled like so.

#container {
	width: 410px;
	height: 50px;
	padding: 0 10px;
	background-color: #CCCCCC;
}
 
#element {
	width: 150px;
	height: 20px;
	line-height: 20px;
}

We’d get something that looks like this, right?

That was a little anticlimactic. Let’s try that again with a few more styles.

#container {
	position: relative;
	width: 410px;
	height: 50px;
	padding: 0 10px;
	background-color: #CCCCCC;
}
 
#element {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	width: 150px;
	height: 20px;
	line-height: 20px;
}

That’ll do it. See all that positioning going on in the stylesheet? If anyone doesn’t know, positioning an element absolutely within a relatively positioned container will position the element based on the container. Basically what’s happening is that we’re telling element to position itself halfway down from the top (top: 50%) of container. Where did the margin-top: -10px come from, though? To align the horizontal centers of the container and element, we have to pull the element up half of its height (20px / 2 = 10px).

And there you have it — a pretty painless method of vertically centering an element. But wait, there’s more. Let’s make our lives a bit easier.

A Dynamic Solution (Javascript)

Don’t worry, I hear you. You don’t want to have to calculate the margins for each individual element you want vertically align. Or there may be cases where you’re attempting to load content dynamically and you really have no way of to calculate the margin yourself. I ran into this problem a few times with both my gallery and slideshow applications (coming soon, I promise). The result was a javascript align method I wrote. It wasn’t always so complex. Until yesterday, it could only vertically and horizontally center. But now (with a little work on the original method) we can do things like the following.

// vertically center the element within its container
align('element', { vAlign: 'middle' });
 
// horizontally align to the right and center vertically
align('element', { hAlign: 'right', vAlign: 'middle' });
 
// horizontally center and vertically align to the bottom
align('element', { hAlign: 'center', vAlign: 'bottom' });

The method takes every combination you can think of. If you’d like some help constructing the method with parameters, head over to the sandbox.

Resources

The script in this post uses Sam Stephenson’s Prototype library. There’s some very good documentation for Prototype written by Sergio Pereira and over at script.aculo.us (another great javascript library).

Download the Source

All source code is provided under the Creative Commons Attribution-Sharealike License. If you agree to these terms, please view and download the entire source now.

This entry was posted on Wednesday, September 27th, 2006 at 11:59 pm and is filed under Cascading Style Sheets, Javascript. 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.