Vertically center text - div dimensions unknown

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?

css
css3

2012-04-04 00:36
by Barbara

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.

2012-04-04 00:41
by markle976

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>

2012-04-04 01:58
by Andrew Briggs

Could work but it's not ideal when there are multiple lines of text. Of course one could always add a negative top margin but it's not possible when the lenght of the text varies each time - Barbara 2012-04-04 10:00