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

I am using react and trying to get a button's text to align with the button. I've tried textAlign but it doesn't seem to do anything. Whenever I resize my Text, it doesn't stay in the middle.

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>
);

}

Where am I going wrong?

Here is a screen shot of what it looks like.

Here is my Github for it if its a problem outside my HomeComponent.js https://github.com/Shaneeyb/Kingdom-Man

Thanks in advance!

CodePudding user response：

Try it without setting the height of button, and it will use the padding and font size to define its height https://codesandbox.io/s/silent-snowflake-io7dmk?file=/src/App.js