在偶数字体大小上垂直居中减号？答案

【问题标题】：Vertically center minus sign on even font-size?在偶数字体大小上垂直居中减号？
【发布时间】：2018-05-29 11:07:43
【问题描述】：

有没有办法在偶数字体大小上垂直居中减号？我理解这个问题，在font-size: 16px; 上没有“中心”像素，因此 1px 高减号必须在上部或下部。 font-size: 17px;上有一个中心，看起来好多了：

字体大小：16px；

字体大小：17px；

我知道这是微不足道的，但对于某些用户来说，这看起来是错误的。

这是example。

【问题讨论】：

你能分享你的代码结构吗？
这是一个 jsfiddle：jsfiddle.net/x29oescg

标签： html css fonts

【解决方案1】：

我认为问题不在于居中，而在于中间字体高度（x 高度）。

<P style="font-family: arial; font-size: 17px;">ABC-DEF</P>
<P style="font-family: times; font-size: 17px;">ABC-DEF</P>
<P style="font-family: georgia; font-size: 17px;">ABC-DEF</P>
<P style="font-family: cambria; font-size: 17px;">ABC-DEF</P>
<P style="font-family: opensans; font-size: 17px;">ABC-DEF</P>
<P style="font-family: tahoma; font-size: 17px;">ABC-DEF</P>
<P style="font-family: verdana; font-size: 17px;">ABC-DEF</P>

在上面的代码中，您可以看到 x 高度（倍）较小的字体在垂直中心下方有一个 minus，在 tahoma/verdana 中它的居中更好。

【讨论】：

verdana 的浏览器/操作系统支持如何？它是默认的吗？它的宽度几乎与 arial 相同。
@scipper：它不是衬线/无衬线。衬线字体之间存在差异（您可以找到“好”和“坏”衬线字体以及“好”和“坏”无衬线字体）。我只拿了常用的字体，你可以检查你想用什么字体在哪里减号。如果您想使用任何“未居中”字体，小技巧是将减号由span 与position: relative 和负号top 包裹起来（如果您有一个HTML 代码在控制之下。
@scipper：我添加了另外两种衬线字体，cambria 和 georgia。两者看起来都相当不错，至少比时代、arial 或 tahoma 好。
关于减号，它们看起来更好，但是 cambria 和 geogria 都有衬线？！
好的，抱歉。我没有提到这一点，你的权利:) 我会为我的情况选择 verdana，因为它具有高可用性。谢谢你的回答顺便说一句

【解决方案2】：

在按钮上使用 display-flex 并使用 line-height 的值在按钮内垂直定位加号或减号。 line-height 值的增加使符号向下移动，而 line-height 值的减小使符号向上移动。谢谢！

此答案基于相关 css 属性的实际行为，以实现按钮内减号和加号的垂直对齐（我没有尝试过 span 或 div 等其他元素，但我相信它的工作原理相同，如果不是请原谅我的猜测）在增加字体大小（到任何程度）时，无论使用哪种字体系列。

用例：有时您需要更大的按钮，里面带有加号或减号。但是字体大小对于按钮来说太小了。当您增加按钮的字体大小时，加号和减号无法像我一样垂直对齐。就在那时，我想出了以下解决方案。

注意：我在其他任何地方都找不到解决方案，所以我最终得到了这个解决方案。我对您对解决方案的任何看法持开放态度，因此请随时留下一些 cmets:)

/* common style */
button {
   height: 50px;
   width: 200px;
   background: #216AFF;
   color: white;
}

.minus {
  font-size: 70px;
  display: flex;
  justify-content: center;
  line-height: 35px;
}

.plus {
  font-size: 50px;
  display: flex;
  justify-content: center;
  line-height: 45px;
}

<button class="minus">-</button>
<br>
<button class="plus">+</button>

【讨论】：