固定大小元素内的大文本

Question

我想创建圆形+/-按钮。到目前为止，我已经尝试使用背景图像，具有SVG文本或SVG路径的内容，但是已经落在文本内容或:after上。

垂直方向上的按钮较大，然后是同一旁观者中的其他一些元素。一切都应该垂直居中对齐。

使用文本时，我必须设置line-height: 0使其垂直对齐。这个可以吗？两者中哪一个更好？

我必须添加padding-top: 2px使其对齐。这会成为跨浏览器的问题吗？

我最喜欢内容版本，因为它减少了 extra 类，复杂性和膨胀。目前，我需要+/-，但可能需要其他持有的东西，例如×，/，单个字母等。另一个原因是我放弃了背景和SVG。

简单的例子：

body {
  background: #888;
}

table {
  border-spacing: 5px;
}

td {
  position: relative;
  border: 1px solid gold;
}

input {
  width: 100px;
  text-align: center;
  background: #555;
  color: #ddd;
  font: bold 14px arial;
  border: 2px solid #bbb;
}

button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid orange;
}

.button_1 {
  font: bold 32px arial;
  line-height: 0;
  padding: 0 0 0 2px;
  vertical-align: middle;
  text-align: center;
}

.button_2:after {
  font: bold 32px arial;
  position: absolute;
  margin-top: -11px;
  margin-left: -10px;
}

.button_2_minus:after {
  content: '\2212';
}

.button_2_plus:after {
  content: '+';
}

<table>
  <tbody>
    <tr>
      <td>
        <button class="button_1">&minus;</button>
        <input type="text" />
        <button class="button_1">+</button>
      </td>
      <td>
        1. Text
      </td>
    </tr>
    <tr>
      <td>
        <button class="button_2 button_2_minus">&nbsp;</button>
        <input type="text" />
        <button class="button_2 button_2_plus">&nbsp;</button>
      </td>
      <td>
        2. :after
      </td>
    </tr>
  </tbody>
</table>