html - 无法对齐带有 + & - 符号的按钮

Question

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

<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/