Vertically align in css for IE7+ and FF

Making a text vertically aligned is one the challenging tasks with css. Here is one quick solution which I found and it works fine in IE7+

solution is to use vertical-align: middle;

but this style doesn’t work as it expect to work, or as we think it should work.

here is the trick:

<div class=”verticalAlign”>
<span></span>
<p>Here is some text that will be middle aligned.</p>
</div>

.verticalAlign{
display: block;
height: 300px;
width: 400px;
}

.verticalAlign span{
display: inline-block;
display: inline !IE;
height: 300px;
width: 1px;
vertical-align: middle;
}
.verticalAlign p{
display: inline-block;
}