如何实现Button按钮内「+」「-」字符的垂直居中对齐

问题根本原因 #

半角的「-」字符在大多数字体设计中，字面高度比「+」低，默认的基线对齐规则下就会出现「-」错位的情况，属于字体本身的字符设计特性，无需替换为图片即可解决，以下是3种可直接落地的方案：

方案1：用inline-flex强制居中（兼容性最好、最通用） #

给加减符号单独加包裹标签，强制设置对齐规则，适配所有字体场景：

.btn-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}

对应的HTML结构：

<button>
  <span class="btn-symbol">-</span>
  减少数量
</button>

方案2：字符偏移微调（无需额外标签） #

如果不想修改DOM结构，可以直接针对「-」字符做位置微调，偏移数值可根据实际使用的字体效果调整：

button {
  /* 优先用等宽字体，+-字符的占高一致性更好 */
  font-family: system-ui, monospace, sans-serif;
}
button .minus-symbol {
  /* 可根据实际渲染效果上下调整0.1-1px */
  transform: translateY(0.5px);
  display: inline-block;
}

方案3：替换为全角加减号（零CSS成本） #

全角的「＋」「－」字符本身的字面居中效果比半角的「+」「-」好，大部分场景下不需要额外写CSS就能实现对齐：

半角字符：+ -
全角字符：＋ －
直接替换按钮内的半角字符即可，适配性更强，适合不需要精细调整的快速开发场景。

内容的提问来源于stack exchange，提问作者Brian Bui