HTML button text alignment in Firefox

Question

Using this CSS:

button {
    font-size: 14px;
    height: 25px;
    width: 25px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}

I am unable to align certain text properly in Firefox. For example:

Firefox (38.0.5)

Chrome

The horizontal alignment of the [+] button is off in Firefox, but not in Chrome? What's going on and how can I fix it?

JSFiddle: http://jsfiddle.net/oge3tg3n/2/

Answer 1

If you increase the height and width to 27px, the alignment will be centered in both firefox and chrome.

button {
   font-size: 14px;
   height: 27px;
   width: 27px;
   text-align: center;
   vertical-align: middle;
   padding: 0;
   margin-left: auto;
   margin-right: auto;
}

Tested in firefox 38.0.5.