在按钮上使用display-flex,并使用line-height的值来垂直定位加号或减号符号。增加line-height值会将符号向下移动,减少line-height值会将符号向上移动。谢谢!
这个答案基于相关CSS属性的实际行为,以实现在增加字体大小(任何程度)的情况下,无论使用什么字体族,都可以在按钮内部垂直对齐减号和加号符号(我没有尝试其他元素,如span或div,但我相信它们的工作方式是相同的,如果不是,请原谅我的猜测)。
用例:有时您想要带有加号或减号符号的更大的按钮。但是按钮的字体大小太小了。当您增加按钮的字体大小时,加号和减号符号无法垂直对齐,就像我的情况一样。这就是我想出以下解决方案的原因。
注意:我找不到其他地方的解决方案,所以最终采用了这个解决方案。如果您对解决方案有任何意见,请随时留下评论:)
/* 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>