为什么单击按钮时按钮的样式会发生变化？

Question

我编辑了按钮的样式，但是当我单击一个时，会调用一个函数并更改值（通过 ajax，如果这会影响任何内容），但按钮会像图像上一样更改。这是我的代码：$(document).ready(function() {  $(':button').on('click', function(event) {    $('#ID').val(this.id);    var tmp = this.id;    $.ajax({      type: $('#klik').attr("method"),      url: $('#klik').attr("action"),      data: $('#klik').serialize(),      success: function(d) {        alert(d)        $('#' + tmp).val(d);        const button = document.getElementById(tmp);        button.disabled = true;        if (d == 'bomba') {          alert('bb');        }      },      error: function() {        alert('Greska')      }    });  });});var docFrag = document.createDocumentFragment();for (var i = 0; i < 9; i++) {  var row = document.createElement("tr")  for (var j = 0; j < 9; j++) {    var elem = document.createElement('input');    elem.className = 'gumb';    elem.type = 'button';    elem.id = 'r' + i + 's' + j;    elem.value = '';    elem.innerHTML = elem.value;    docFrag.appendChild(elem);  }  document.body.appendChild(docFrag);  document.body.appendChild(row);}这是我的 CSS：.gumb {  width: 50px;  height: 50px;  background-color: blue;  text-align: center;  font-size: 25px;  color: white;  margin-bottom: 10px;}

Answer 1

您需要对齐文本。像这样的东西：

.gumb {  vertical-align: middle; }