为什么我的按钮的文字与按钮不对齐？

Question

我正在使用 React 并尝试让按钮的文本与按钮对齐。我试过 textAlign 但它似乎没有做任何事情。每当我调整文本大小时，它不会停留在中间。

function RegisterBtn() {
return (
  <div
    style={{
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      padding: "60px",
    }}
  >
    <button
      className="btn btn-danger"
      onClick={() => navigate("/RegisterComponent")}
      style={{
        padding: "3vh",
        border: "none",
        height: "80px",
        width: "300px",
        fontSize: "60px",
        textAlign: "center"

      }}
    >
      Register
    </button>
  </div>
);

}

我哪里错了？

Here is a screen shot of what it looks like.

这是我的 Github 如果问题超出了我的 HomeComponent.js https://github.com/Shaneeyb/Kingdom-Man

提前致谢！

Answer 1

试试不设置按钮的高度，它会使用padding和font size来定义它的高度 https://codesandbox.io/s/silent-snowflake-io7dmk?file=/src/App.js

登记

为什么我的按钮的文字与按钮不对齐？

Why is my button's text not aligning with the button?

text

center

button

centering

reactjs