Button moves down whenever I place text in it-CodePudding

I am trying to make a TicTacToe game as my first project and for some reason no matter what I do when I click one of the cells they go down a line and are not in the same row as the others. this is an example

here is the css:

button {
   
    
    width: 30%;
    height: 200px;
    
  
    
    text-align: center;
      line-height: 0.85px;
      cursor: pointer;
      display: inline;
      margin: 0px;
      font-size: 14rem;
      
  
    
  }

this is the typescript where I insert X and O in and the html where I present a button:

    public place ()
   {

    if (this.reserved())
    {
     if(this.player==1)
     {
       this.xory = 'X'
       
       
       this.player  
     }
     else
     {
       this.xory = 'O'
       
       this.player--
     }
    }


   }





    <button (click) = "place()">{{xory}}</button>

CodePudding user response：

I suggested to use   as content of your empty boxes to compensate the alignment when the player didn't fill it with a choice.

By the way it was hard to say how you should initialize that value since you are using Angular.

So you can just opt for using the vertical-align:bottom; in your css rule as showed in this example:

button {
  width: 30%;
  height: 200px;
  cursor: pointer;  
  
  text-align: center;    
  font-size: 10rem;  
  
  display: inline;
  vertical-align: bottom;
  margin: 0 0 3px 0;
  padding: 0;
}

<button></button>
<button>O</button>
<button></button>
<button>X</button>
<button></button>
<button></button>
<button></button>
<button>O</button>
<button>X</button>