Vertical Alignment That Works in IE

vertical-alignment.html

<!-- IE6+ -->
<!--
	NOTES:

	1. For this to work in IE6 or 7, your elements must have a "natural" display value of inline.  <span>, <img>, <a> — these are a few elements that qualify.

	2. These two elements must be the only immediate children of their parent.

	3. valign-content cannot be 100% the width of the container.  But it can be 99% width!  Play with it.

	4. This works great for all block-ish elements, and my favorite use is automatic modal (i.e. lightbox) v-alignment.
-->
<style>
	.valign-content {
		display: inline-block;
		vertical-align: middle;
	}
	.valign-helper {
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle;
	}
</style>

<div>
	<span class="valign-content">
		RANDOM (VALID) HTML CONTENT
	</span>
	<span class="valign-helper"></span>
</div>


<!-- IE8+ -->
<!--
	NOTES:

	1. Similar to IE6+ solution, but requires less markup and works better.

	2. Uses :before, robbing the valign parent of one major pseudo-child.

	3. Sets font-size: 0 on valign parent, so children font-size must be manually set, if not already.
-->
<style>
	.valign {
		font-size: 0;
	}
	.valign:before {
		content: "";
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle;
	}
	.valign > * {
		display: inline-block;
		vertical-align: middle;
		font-size: medium;
	}
</style>

<div class="valign">
	<span>
		RANDOM (VALID) HTML CONTENT
	</span>
	<span>
		SOME MORE
		<br /><br /><br /><br /><br />
		CONTENT
	</span>
</div>


<!-- IE8+ Another Approach -->
<!--
	NOTES:

	1. Abuses table-cell, so there will be situations where this causes trouble.
-->
<style>
	/*
	 * Cannot set width in % (despite what you see below)
	 * Width fills parent by default
	 * Width larger than parent will be truncated to parent width
	 * Width or height smaller than content will be enlarged to content bounds
	 */
	.valign {
		display: table-cell;
		width: 1%;
		vertical-align: middle;
	}
	.valign > * {
		display: inline-block;
		vertical-align: middle;
	}
</style>

<div class="valign">
	<span>
		RANDOM (VALID) HTML CONTENT
	</span>
	<span>
		SOME MORE
		<br /><br /><br /><br /><br />
		CONTENT
	</span>
</div>