Css 按钮上的文本未对齐

它有一个用于打开内容的按钮。然后，当它打开时，按钮文本变为“-”，当它关闭到“+”时

我不能使用图标

无论如何，按钮上的“-”或“x”没有对齐。我用过flex显示器，测试过一些东西，但我做不到，请有人帮帮我

document.getElementById（“btn”）.addEventListener（“单击”，“事件）=>{
let button=event.target；
如果（button.innerText==“-”）{
button.innerText=“+”；
}否则{
button.innerText=“-”；
}
})

*{
保证金：0；
填充：0；
}
div{}
#btn{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：40px；
边界：0；
字体大小：40px；
字号：600；
背景色：红色；
}

x

您只需添加一个宽度属性

.btn{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：40px；
宽度：40px；
边界：0；
字体大小：40px；
背景色：红色；
}

+


−


×

我的建议：

按钮{
背景色：红色；
边界：0；
字号：28px；
字体大小：粗体；
保证金：0 5px 0 5px；
填充：10px；
垂直对齐：中间对齐；
文本缩进：3px；/*用于完美的水平居中，带有一些字体*/
}

+
−
×

带“+”看起来不错，但带“-”或“x”则不在中心。我修改了答案，添加了额外的变量。填充方法将失败，因此我已将其从答案中删除。您可能需要根据需要调整字体大小。如果您能将答案标记为已接受，并在解决问题后进行投票，那将是非常棒的。这将帮助未来的研究人员更快地找到答案。