How to vertically align text across browsers

Question

Please note that I have been through the existing links on this topic and none seem to help in my case.

All suggest a way of how to move the text vertically so that it appears aligned. The problem in my case is that it is already aligned in Chrome, so when I try to align the text for Firefox then it misaligns the text in Chrome.

Please open the following link in Firefox (v12) and Chrome (v19).

http://jsfiddle.net/UQ4D5/

You will notice that it is shifted towards the top in Firefox but is perfectly aligned in Chrome.

Answer 1

Two properties in your css

 display: table-cell;
    vertical-align: middle;

Check to live demo http://jsfiddle.net/UQ4D5/5/