Here's the example: http://jsfiddle.net/X2sMa/
I need to vertically center the text inside the div, I found this technique but whenever I set the div to display: inline-block; the text disappears. Any ideas how to make it work?
If you are not looking to support IE7 and under then you can use
display: table-cell and
vertical-align: middle, otherwise you are stuck using a table.
You're using absolute positioning in your code for div.mask so you can position the paragraph like:
<div class="mask" style="position: absolute; top: 0; left: 0;"> <p style="position: relative; top: 50%;">1500 notes</p> </div>