Center Text on a Button

I know this has been asked a couple of times before, but not of the solutions seem to be working in this case. Basically, I want the word "play" to be centered vertically and horizontally on this button. Horizontally, the text behaves itself, but vertically, not matter what I try, it is always a little bit lower than it should, in all browsers I test it on. Does anyone have any suggestions? Thanks

<style type="text/css">
button {
font-family: Verdana, Geneva, sans-serif;
color: white;
border-style: none;
vertical-align: center;
text-align: center;
}

button:hover {
cursor: pointer;
}

button::-moz-focus-inner /*Remove button padding in FF*/
{ 
border: 0;
padding: 0;
}


.start {
background-color: #0C0;
font-size: 2em;开发者_StackOverflow中文版
padding: 10px;

}


</style>
<button type="button" class="start">play</button>

---

The padding on .start is likely what you'll have to play around with, although the way it's set, it should be centering it, but you can break it out to something like padding: 8px 10px 10px 10px;

You might also check and set the line-height under .start and see if it helps.

---

The correct value for vertical-align is middle, not center. However I'm not sure if that'll make the difference, because it might just affect where the button itself is aligned vertically relative to surrounding text. I'm pretty sure button text is vertically centered by default, though...