Wrong vertical align of text in Google Chrome browser
This very annoying problem is caused by chrome not taking text-transform: uppercase into account. Use the following to get correct centering in Chrome with all-caps text:
text-transform: lowercase;font-variant: small-caps;Fiddle: http://jsfiddle.net/fyvyB/76/
Works great for buttons, for other usecases you might have problems with the text being small-caps and not real caps.
Had a similar issue with a custom font. After some playing around and trying all different display properties on the text element, I noticed that the vertical align issue only affected text elements whose parent was display: block;, despite said text element being set to display: inline;. I resolved the problem by changing parents to display: table; and the child text elem to display: inline;, e.g. below... I can't explain why this worked, but posting here in case it helps others...
<style> div { display: table; } span { display: inline; padding: 5px 10px; /* to make v-alignment clearer */ }</style><div> <span>Some text here</span></div>