如何对齐几行带有不同文本的按钮？

Question

我正在尝试重新创建Microsoft Windows 10计算器（签出以供参考）。 由于按钮包含不同的字母和符号，因此无法对齐所有按钮。 我希望所有按钮的大小都完全相同，并且彼此相邻，并且它们之间没有空格。

另外，在发布此消息时，我注意到我的显示更加突出于右侧。 有解决的主意吗？

链接到HTML和CSS的组合： https : //codepen.io/anon/pen/jpLOjP

HTML：

<body>
  <form id="calculatorForm">
    <input type="text" id="display">
    <div class="row">
      <!--percent-->
      <button type="button" onclick="calculate()">&#37;</button>
      <!--sq root-->
      <button type="button" onclick="calculate()">&radic;</button>
      <!--x^2-->
      <button type="button" onclick="calculate()">x&sup2;</button>
      <!--1/x-->
      <button type="button" onclick="calculate()">&sup1;&frasl;<sub>x</sub></button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">CE</button>
      <button type="button" onclick="reset()">C</button>
      <!-- remove -->
      <button type="button" onclick="calculate()">&#8653;</button>
      <button type="button" onclick="calculate()">&divide;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">7</button>
      <button type="button" onclick="calculate()">8</button>
      <button type="button" onclick="calculate()">9</button>
      <button type="button" onclick="calculate()">&times;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">4</button>
      <button type="button" onclick="calculate()">5</button>
      <button type="button" onclick="calculate()">6</button>
      <button type="button" onclick="calculate()">&minus;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">1</button>
      <button type="button" onclick="calculate()">2</button>
      <button type="button" onclick="calculate()">3</button>
      <button type="button" onclick="calculate()">&plus;</button>
    </div>
    <div class="row">
      <button type="button" onclick="calculate()">&plusmn;</button>
      <button type="button" onclick="calculate()">0</button>
      <button type="button" onclick="calculate()">&sdot;</button>
      <button type="button" onclick="calculate()">&equals;</button>
    </div>
  </form>
</body>

CSS：

#display {
  font-size: 90px;
  width: 100%;
}

form {
  background: #eee;
  border: solid grey;
  display: block;
  margin: 0 auto;
  width: 450px;
  padding: 10px;
}

.row {
  font-size: 0px;
  text-align: center;
  margin: 0 auto;
}

.row button {
  width: 25%;
  height: 60px;
  font-size: 40px;
  font-family: calibri;
}

Answer 1

您正在寻找vertical-align 。

.row button{
    vertical-align: middle;
}