Resolved: Why is my button’s text not aligning with the button?

Question:

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!

Answer:

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

If you have better answer, please add a comment about this, thank you!