我的价值不会使文本居中对齐

Question

Can anyone please help me understand why this text value of "7" is not centering?

<input id="button7" value="7" onclick='Calc.Input.value += "7"' type="button" class="button"/>

For the web version the 7 is centering, but not the mobile version through media querying.

My Media Query CSS only is;

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {

.set_1 {
  height: 270px;
  width: auto;
}

.set_2 {
  height: 266px;
  width: auto;
}

.set_3 {
  height: 266px;
  width: auto;
}

.set_4 {
  height: 266px;
  width: auto;
}

.set_5 {
  height: 266px;
  width: auto;
}

.text_box{
  height: 180px;
  width: 730px;
  font-size: 100px;
}

.button {
  height:200px;
  width:200px;
  font-size: 100px;
  text-align: center;
}

}

Answer 1

add:

display: block;

I believe....