Getting elements to display vertically centered in IE7 - css

Question

I can get this to work in all browsers but IE7.
HTML
<span class="verticalMiddle"></span>
<span class="jArrow inlineWrapper"></span>
<h2 class="inlineWrapper">What is depression?</h2>
CSS
.inlineWrapper {
width: 606px;
margin-left: 10px;
vertical-align: middle;
display: inline-block;
}
.verticalMiddle {
vertical-align: middle;
height: 50px;
width: 0;
display: inline-block;
}
.jArrow {
background: url(http://www.healthquestlongbeach.com/images/library/faq/arrow.png) no-repeat left top;
height: 20px;
width: 22px;
}
h2.inlineWrapper {
width: 563px;
margin-right: 13px;
}
Fiddle: http://jsfiddle.net/RfRrG/5/
The problem is that the h2 is being pushed down buy the .verticalMiddle {height: 50px;}, but for some reason only in IE7 (but not .jArrow for some odd reason).
I can fix this problem by adding
.inlineWrapper {display:inline;}
But then it breaks it in the other browsers. Why is the text getting pushed down and how can I align it correctly?

Answer 1

display: inline-block in IE7 only works on elements that are naturally inline.
Fortunately, there's an easy workaround. Replace this:
display: inline-block;
with this:
display: inline-block;
*display: inline;
In most instances you must also add zoom: 1, but it's not required in your case.
* is a "safe hack" that applies the property in only in IE7 and lower.