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


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 (
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      padding: "60px",
      className="btn btn-danger"
      onClick={() => navigate("/RegisterComponent")}
        padding: "3vh",
        border: "none",
        height: "80px",
        width: "300px",
        fontSize: "60px",
        textAlign: "center"

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
Thanks in advance!


Try it without setting the height of button, and it will use the padding and font size to define its height

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