Tengo 9 botones en un tablero y quiero mostrar una 'X' o una 'O' cada vez que los presiono. Sin embargo, cuando presiono un botón, se apaga.
$(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>¿Cómo puedo arreglarlo para que cada vez que presiono uno de ellos, se queden donde comenzaron?
¡Gracias!
Esto sucede debido al atributo de alineación vertical, que a veces tiene un comportamiento defectuoso en mi opinión.
Agregar vertical-align: middle; a su clase "xo-btns" y debería estar bien.