css - 按钮上的文本未对齐

Question

它有一个用于打开内容的按钮。然后当它打开时，按钮文本变为“-”，当它关闭时变为“+”。
我不能使用图标!
无论如何，“-”或“x”在按钮上没有对齐。我使用过 flex display，测试了几件事，但我不能，请有人帮我

document.getElementById("btn").addEventListener("click", (event) => {
  let button = event.target;
  if (button.innerText == "-") {
    button.innerText = "+";
  } else {
    button.innerText = "-";
  }
})

* {
  margin: 0;
  padding: 0;
}

div {}

#btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  border: 0;
  font-size: 40px;
  font-weight: 600;
  background-color: red;
}

<div id="div">
  <button id="btn">
            x
        </button>
</div>

Answer 1

你只需要添加一个宽度属性。

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  border: 0;
  font-size: 40px;
  background-color: red;
}

<button class="btn">+</button>
<br/>
<button class="btn">−</button>
<br/>
<button class="btn">×</button>

笔记:

减号不是破折号 - ，并且关闭符号也不是 X因为它们会错位。直接从上面的代码中复制符号。

符号引用

https://en.wikipedia.org/wiki/Plus_and_minus_signs

https://en.wikipedia.org/wiki/X_mark

PS:从问题复制的片段中删除了一些未在答案中使用的代码。