Firefox中的HTML按钮文本对齐方式

Using this CSS:

使用这个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中正确对齐某些文本。例如:

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?

[+]按钮的水平对齐在Firefox中关闭,但在Chrome中没有?发生了什么,我该如何解决?

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

1 个解决方案

#1

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

如果将高度和宽度增加到27px,则对齐将在firefox和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.

在Firefox 38.0.5中测试过。