加号 (+) 和减号 (-) 的 UIButton 标签文本垂直对齐答案

【问题标题】：UIButton label text vertical alignment for plus (+) and minus (-)加号 (+) 和减号 (-) 的 UIButton 标签文本垂直对齐
【发布时间】：2018-09-04 14:29:49
【问题描述】：

我有一个带有标签文本“+”和“-”的圆形按钮。它没有正确垂直对齐。

我已经在做

button.contentVerticalAlignment = UIControlContentVerticalAlignment.center

请帮助将其与中心（垂直）对齐。

【问题讨论】：

你可以在uibutton的size inspector中使用image insets和title insets来调整图片
@RahulGUsai 我确实设置了 titleEdgeInsets = .zero，但它没有用
尝试从尺寸检查器设置它

标签： swift uibutton vertical-alignment

【解决方案1】：

问题的根本原因是字符没有垂直对齐。请改用fullwidth plus sign 和fullwidth hyphen-minus。

这些字符便于复制粘贴：

＋ －

结果：

【讨论】：

【解决方案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>

【讨论】：