无法对齐具有+＆amp;的按钮- 标志

Question

我有两个带+和 - 的按钮。我无法获得相同宽度的两个按钮。如果我使用css width属性，则标志看起来不会集中对齐。

<span class="button-inner">
    <input type="submit" value="-" rel="rc1">
</span>
<br>
<span class="button-inner">
    <input type="submit" value="+" rel="rc2">
</span>

我的Css：

input[rel^="rc"] {
    width: 5%;
    margin-left: auto;
    margin-right: auto;
}

- 和+符号不是集中的，或者两边都没有相同的填充

Answer 1

通过使用width属性看起来你正朝着正确的方向前进，但正如你所说，+和 - 字符在中心没有对齐。您可以添加属性

text-align:center;

并且几乎修复它......它仍然看起来像+和 - 在右边。这是因为宽度不够宽。在这个jsfiddle,中，8％的宽度似乎可以解决问题。

可能的修复：

input[rel^="rc"] {
width: 8%;
margin-left: auto;
margin-right: auto;
text-align:center;

}

在此处查看https://jsfiddle.net/sq8aba3v/