My buttons go down when I press them

Question

I have 9 buttons on the board, and I want to show “X” or “O” whenever I press them. However, when I press the button, it drops.

$(document).ready(function(){

  var against = 'human';
  var board = ['-','-','-',
               '-','-','-',
               '-','-','-'];
  var turn = 'X';
  
  $('.xo-btns').click(function(){
    $(this).text(turn);
  });
  
});

body{
  padding: 0px;
  margin: 0px;
  width: auto;
  height: auto;
  background: black;
  font-family: 'Raleway', sans-serif;
}

.container{
  text-align: center;
}

.board{
  display: inline-block;
  text-align: center;
  background: red;
  padding-top: 15px;
  padding-left: 10px;
  height: 250px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.xo-btns{
  width: 70px;
  height: 70px;
  padding: 0px;
  border-radius: 4px;
  background: transparent;
  outline: none;
  color: white;
/*   display: inline-block; */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="board">
    <button class="xo-btns" id="one" value="1"></button>
    <button class="xo-btns" id="two" value="2"></button>
    <button class="xo-btns" id="three" value="3"></button> 
    <br> 
    <button class="xo-btns" id="four" value="4"></button>
    <button class="xo-btns" id="five" value="5"></button>
    <button class="xo-btns" id="six" value="6"></button> 
    <br>  
    <button class="xo-btns" id="seven" value="7"></button>
    <button class="xo-btns" id="eight" value="8"></button>
    <button class="xo-btns" id="nine" value="9"></button>  
    <br>
  </div>
  
</div>

Run codeHide result

How can I fix this, so every time I click one of them, they stay where they started.

Thank!

Answer 1

This is due to the vertical-align attribute, which in my opinion sometimes has erroneous behavior.

Add vertical-align: middle;"xo-btns" to your class, and you should be fine.