当我按下按钮时，我的按钮会下降

Question

I have 9 buttons in a board and I want to show an 'X' or an 'O' whenever I press them. However when I press a button it goes down.

 $(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> 

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

Thank you!

Answer 1

This happens because of the vertical-align attribute, which sometimes has a buggy behaviour in my opinion.

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