title: Why is the text-align property not working inside a button element?
body: <pre><code>button {
      text-align: center;
      font-size:50px;
      color:black;
      border:2px solid white;
      border-style:dotted;
      border-color:red;
  }
  </code></pre>
  
  <p>When i run this code, all the properties work except the text-align. I don't understand why is the text-align not working when it's inside a button? </p>
  
  <p>Note: Yes, i know there are ways to align the button in the center, i am not asking how to align the button, i am asking why is the text-align not working inside the button element like all the other properties are working? </p>